首 页 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 尾 页

CSS之垂直导航条

发布者: superzhang | 发布时间:2017-11-25

今天的内容比较简单,我们来学习一种常见的垂直导航条的实现方法,首先看一下效果图:

CSS之垂直导航条1.首先我们创建一个有效的列表

<li> <a href="http://www.???.com">首页</a> </li>

<li><a href="http://www.???.com">关于我们</a> </li>

<li><a href="http://www.???.com">产品展示</a> </li>

<li><a href="http://www.???.com">产品知识</a> </li>

<li><a href="http://www.???.com">新闻动态</a> </li>

<li><a href=

想读更多 ->

瑞讲堂|HTML5课程系列——其他表单元素

发布者: superzhang | 发布时间:2017-11-25

3.1 select下拉选择控件

在表单中通过<select>控件可以创建一个下拉式的列表或带有滚动条的列表,可以在列表中选中一个或多个选项,通常用于填写生日、所在地区等信息中,开发人员提前设计好选项,让用户在填写信息时可以直接选择,更加方便用户的使用。

基本语法:

<form action=“form.php” method=“post”>

<select name="week">

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

<option value="6">6</option>

<option value="7">7</option>

</select>

</form&g

想读更多 ->

Css布局冷知识1

发布者: superzhang | 发布时间:2017-11-25

伪类和伪元素

它们允许应用的样式用于文档不存在的结构上,或者是通过当前元素的状态甚至是文档自身的状态而推断的某些东西上。

a:link 指值元素没有被访问过的状态。

a:visited 指元素已经访问的状态。

a:hover 指鼠标经过元素的状态。

a:active 指鼠标按下激活元素的状态

盒子模型

<a>

padding

border

margin

Css布局冷知识1

相对定位

Css布局冷知识1

#box_relative { position: relative; left: 30px; top: 20px; }

想读更多 ->

Nginx合并Js/Css

发布者: superzhang | 发布时间:2017-11-25

小郑同学在开发我们系统的时候发现首页静态资源多次请求服务器加载缓慢。带着这个问题他去访问了淘宝,发现了淘宝一条请求里有多个Js。最后百度一下发现了Concat。Concat是淘宝开发的一个Nginx模块,可以将多个Js/Css合并成一个请求(当然在合理的情况下),这样可以减少对服务器的请求个数,达到静态资源相对较快的加载。下面我们看一下具体的操作。

一、Nginx+Concat安装

下载Nginx 和Concat

wget http://nginx.org/download/nginx-1.6.2.tar.gz

git clone git://github.com/alibaba/nginx-http-concat.git

下载Concat可能需要翻墙

解压安装

将下载好的Concat 放到某目录,本次试验放入/usr/local/src/

tar zxvf nginx-1.6.2.tar.gz

cd nginx-1.6.2

./configure

--prefix=/usr/local/webserver/nginx

--with-http_stub_status_module

--with-http_ssl_module

想读更多 ->

CSS基础内容复习

发布者: superzhang | 发布时间:2017-11-25

平台ID:WEB_wysj(点击关注) ◎ ◎ ◎ ◎ ◎◎◎◎◎一┳═┻︻▄

块元素、内联元素

块元素是一个元素,占用了全部宽度,在前后都是换行符

如:h1,p,div

内联元素只需要必要的宽度,不强制换行。

span, i,a

框模型

所有HTML元素可以看作盒子 包括 边距,边框,填充,和实际内容。

Margin - 清除边框区域。Margin没有背景颜色,它是完全透明

Border - 边框周围的填充和内容。边框是受到盒子的背景颜色影响

Padding - 清除内容周围的区域。会受到框中填充的背景颜色影响

Content - 盒子的内容,显示文本和图像

当为元素设置了width和height 属性时,只是设置内容区域的宽度和高度。要知道,完全大小的元素,你还必须添加填充,边框和边距。

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的:

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

margin,padding

margin清除周围的元素(外边框)的区域。margin没有背景颜色,

想读更多 ->

精通 CSS 选择器(二)

发布者: superzhang | 发布时间:2017-11-25

补充了一些之前遗漏掉的选择器以及一些在 Selectors Level 4 中新定义的选择器。

属性选择器不区分大小写

[attribute="value" i],在 Selectors Level 4 中增强了属性选择器,添加一个 i 标识,让属性大小写不再敏感,例如a[href$=".pdf" i]:

<a href="a.pdf">属性值是小写字母会被选中</a><a href="b.PDF">属性值是大写字母也会被选中,如果没有添加 i 标识则该元素不会被选中</a>

支持的浏览器:Chrome/Opera, Firefox, Safari

任意匹配伪类

:matches(selector...),选择匹配任意选择器参数的元素,例如:

section h1, article h1, aside h1 { color: red;}

使用该伪类可以写成:

:matches(section, article, aside) h1 { color: red;}

作用是简化代码。

支持的浏览器:Chrome/Opera(:-webkit-any), Firefox(:-moz-any), Safari

链接伪类

:

想读更多 ->

CSS 指南

发布者: superzhang | 发布时间:2017-11-25

CSS - 层叠样式表(Cascading Style Sheets)

CSS定义如何显示HTML元素。

CSS 描述了HTML元素的可视化样式(外观,布局,颜色,字体)。

CSS是单独设计的文件(从而大大提高HTML的灵活性和减少HTML的复杂性)。

CSS简单易学。你可以把一个HTML元素当作选择器,并在大括号内的列出样式属性

CSS 指南

CSS 实例

body

{

background-color:#d0e4fe;

}

h1

{

color:orange;

text-align:center;

}

p

{

font-family:"Times New Roman";

font-size:20px;

}

ids:CSS代码中的 #logo 用来选择带有属性 id="logo" 的HTML元素。

所有这些选择器都可以附加使用伪类(pseudo-classes)。一个伪类用来:

定义一个元素的特殊状态,这个状态往往和用户的动态交互行为或文档的动态结构化特征有关,因此不能提前写入HTML文档中。

是以冒号(colon) : 开始的一个关键词。

CSS 伪类:用来增强CSS选择器

语法

伪类不能单独存在。它必须附加在一个选择器上。伪类将只是定义那个选择器的特殊状态。语法看起来如下:

.selector:pseudo-class{ }

在选择器和伪类中间没有空格, between the select

想读更多 ->

7个你值得关注的CSS专家及CSS主题

发布者: superzhang | 发布时间:2017-11-25

今天给大家介绍7个值得大家关注的CSS专家,同时他们所分享的6个CSS相关的主题:

第一位:

Wenting Zhang,她是CSS ICON && underline.js作者、 也是Adobe Typekit的用户体验设计师

CSS可不仅仅是简简单单的布局语言,她还是绘画和动画双料小能手!512个极简风格的图标都全部用CSS实现,然后再细细打磨动画。

来自Adobe Typekit的用户体验设计师Wenting Zhang将细细讲述CSS的隐藏绘画功能和高级动画技巧漂亮极简的CSS icon设计与描绘,让CSS进阶学习不再枯燥。那些不广为人知的CSS高阶技巧,让网页界面设计活起来!

第二位:

大漠:CSS专家、阿里巴巴前端技术专家,由他运营的http://www.w3cplus.com/网站受到很多新同学的好评。

现在大量网页设计基于网格布局。虽说人们通常注意不到它,但杂乱无章的布局时代确实已经过去了,现在是整齐结构化的天下。无论从理论、美学和整齐来说,这样的布局都很好平衡。网格结构是所有现代网站的基础,它总能给最终用户完美无暇的设计。他给通过给大家分享“CSS Grid Layout”这个主题来解决上面的问题。

第三位:

陈剑鑫:阿里移动事业群 -

想读更多 ->

css入门汇总

发布者: superzhang | 发布时间:2017-11-25

CSS引入的方式:

方式一:行内样式

<p style=”color:red;”></p>

方式二:内嵌套

<style type=”text/css”>

P{

Color:red;

}

</style>

<p>内嵌套</p>

方式三:链接式(把CSS抽到一个单独的文件中,这样可以给很多网页使用)

<link type=”text/css” href=”red.css” rel=”stylesheet” />

方式四:导入样式

<style type=”text/css”>

@import url(red.css)

</style>

一般情况下不适用导入样式:这是直接把这个CSS文件加载都这个地方,所以说效率不高,链接式是用什么元素有用什么样式再去CSS中请求加载。

CSS中的优先级:

行内样式 >链接式>内嵌式>导入式(链接式在后面)

行内样式 >内嵌式>导入式>链接式(链接式在前面)

总的规律:

想读更多 ->