企业网站综合布局实战_学习笔记

首页免费课企业网站综合布局实战笔记

企业网站综合布局实战

最热最新

kumin

利用overflow:auto;来撑开父元素

查看全部

0 采集收起来源：编程练习
2016-03-18
WYDWYD008

所有清楚浮动方法，都在这里

查看全部

0 采集收起来源：编程练习
2016-03-18
qq_石头剪刀布_4

一.搭建网页框架 1.整体内容区域<div class="container"> 2.头部区域<div class="head clearfix"> <div class="logo"></div> <div class="nav"></div> </div> 3.幻片区<div class="banner"></div> 4.块状区<section></section> 5.内容区域包含公共样式<section class="mb20"> <div class="common（共同的样式）"></div> <div class="common mb1(单独的样式) mb20（公用的样）"></div> 6.<main class="clearfix main" role=main> <div class="new common"> <ul> <li> <div class="fleft"></div> <div class="fright"> <h3></h3> <p></p> </div> </li> </ul> </div> 6.页脚部分<div class="foot"><p></p></div> </div>

查看全部

0 采集收起来源：编程挑战
2018-03-22
qq_石头剪刀布_4

<meta name="keywords" content="imooc" />关键字

查看全部

0 采集收起来源：编程挑战
2018-03-22
qq_石头剪刀布_4

无障碍访问（隐藏文字）*/ <div class="logo accessibility" title="logo" rel=""></div> .accessibility { position: absolute; text-indent: -9999px; } 无障碍访问文字

查看全部

0 采集收起来源：编程挑战
2018-03-22
qq_石头剪刀布_4

/************************************************************* 样式重置 *************************************************************/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; }

查看全部

0 采集收起来源：编程挑战
2016-03-18
qq_石头剪刀布_4

.clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } 在写HTML代码的时候，发现在Firefox等符合W3C标准的浏览器中，如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开。这个clearfix的CSS使用了after这个伪对象，它将在应用clearfix的元素的结尾添加content中的内容。在这里添加了一个句号"."，并且把它的display设置成block；高度设为0；clear设为both；visibility设为隐藏。这样就达到了撑开容器的目的啦。

查看全部

1 采集收起来源：编程挑战
2018-03-22
江宁 07:56

Vertical-align:middle;设置图片垂直对齐

查看全部

0 采集收起来源：企业网站制作之页面头部制作（二）
2016-03-17
麦霸乔乔

list-style-type可以设置列表项目符号为：none无项目符号，disc实心圆，circle空心圆，square实心方块等但是不可以设置图片为项目符号。

查看全部

0 采集收起来源：练习题
2016-03-17
麦霸乔乔 11:43

焦点图<div class="ad" id="picBox"><br> <div class="pic"><br> <ul><br> <li><img src="images/ad2.jpg" /></li><br> <li><img src="images/ad3.jpg" /></li><br> <li><img src="images/ad4.jpg" /></li><br> </ul><br> </div><br> 图片层外要加id 必须要有class为pic的div

查看全部

0 采集收起来源：企业网站制作之焦点图制作
2018-03-22
麦霸乔乔 11:13

myFocus焦点图片的制作

查看全部

0 采集收起来源：企业网站制作之焦点图制作
2016-03-17
NoLimits

底部版权用dl dt dd更符合语义化。

查看全部

0 采集收起来源：企业网站制作之底部版权区制作
2016-03-17
Lemon156

导入焦点图样式<br> <script src="js/setHomeSetFav.js" type="text/javascript"></script><br> <script src="js/setHomeSetFav.js" type="text/javascript" charset="gb2312"></script><br> <script src="js/myfocus-2.0.1.min.js" type="text/javascript"></script><br> <script src="js/mf-pattern/mF_YSlider.js" type="text/javascript"></script><br> <link href="js/mf-pattern/mF_YSlider.css" rel="stylesheet" type="text/css" /><br> <script type="text/javascript"><br> myFocus.set({<br> id:'picBox'}<br> )<br> <br> 焦点图<div class="ad" id="picBox"><br> <div class="pic"><br> <ul><br> <li><img src="images/ad2.jpg" /></li><br> <li><img src="images/ad3.jpg" /></li><br> <li><img src="images/ad4.jpg" /></li><br> </ul><br> </div><br> 图片层外要加id 必须要有class为pic的div

查看全部

0 采集收起来源：企业网站制作之焦点图制作
2018-03-22
下一站--幸福

text-indent：2em 首行缩进两个字符

查看全部

0 采集收起来源：企业网站新闻详细页制作
2016-03-17
qq_莫梓豪_0

/*在此定义相关CSS样式*/ *{margin:0;padding:0;} .topList{ width:300px; height:180px; border:1px solid #e8e8e8; margin:5px auto; } .topList ul{padding:5px; } .topList li { list-style-type:none; font-size:10px;height:30px; } em{ display:block;width:20px; height:16px; text-align:center;font-style:normal; color:#333; float:left; background:url( http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg) no-repeat bottom center; } .top em{ color:white; background:url( http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg) no-repeat top center ; } .topList a:link,.topList a:visited{ text-decoration:none; color:black; } .topList a:hover,.topList a:active{ text-decoration:none; color:red; }

查看全部

0 采集收起来源：编程练习
2016-03-16