css基础知识汇总9

page-index.css

/** 在这里编辑主页的样式表*//** 设置body*/
body{/*设置body的背景图片，水平方向重复*/background: url(../img/bd-bg.png) repeat-x;height: 3000px;
}/** 解决高度塌陷问题clearfix*/
.clearfix:before,
.clearfix:after{content: "";display: table;clear: both;
}.clearfix{zoom:1;
}/** 固定元素的宽度和居中*/
.w{width: 940px;margin: 0 auto;
}/*设置header*/
.header{/*background-color: #bfa;*//*设置一个上内边距*/padding-top: 37px;/*设置一个下内边距*/padding-bottom: 46px;
}/*设置logo的位置*/
.logo{margin-left: 15px;
}/** 设置导航条*/
.nav{/*设置向右浮动*/float: right;/*设置一个上外边距*/margin-top: 22px;
}.nav li{/*设置向左浮动*/float: left;/*设置左右内边距*/padding: 0 10px 8px;/*设置左边框*/border-left: 1px #d6d6d6 dotted;
}/*设置导航条中的超链接*/
.nav a{/*设置字体颜色*/color: #666;/*设置字体*/font: bold 14px Georgia;/*去除下划线*/text-decoration: none;}/*设置超链接的移入效果*/
.nav a:hover{color: #a1a1a1;text-decoration: underline;
}/** 设置导航中的小标题* 在chrome浏览器中字体最小支持到12px*  1-11都显示为12px*/
.nav p{/*字体颜色*/color: #b7b7b7;/*字体大小*/font: 11px tahoma;
}/** 设置banner*/
.banner{/*设置高度*/height: 356px;/*设置背景*/background: url(../img/banner-bg.png) no-repeat bottom center;/*开启一个相对定位*/position: relative;
}/*设置导航按钮*/
.pointerDiv{/*开启绝对定位*/position: absolute;/*为导航点进行定位*/top: 314px;left: 15px;
}.pointerDiv a{/*设置a浮动*/float: left;/*设置宽度和高度*/width: 17px;height: 17px;/*设置一个左外边距*/margin-left: 4px;background:url(../img/pointer.png) no-repeat;
}/*设置超链接的hover*/
.pointerDiv .active,
.pointerDiv a:hover{background:url(../img/pointer-active.png) no-repeat;
}/*设置content部分*/.content h1{/*设置文本居中*/text-align: center;/*设置字体*/font: bold 24px Georgia;/*设置上内边距*/padding: 6px 0 20px 0;/*设置一个下外边距*/margin-bottom: 38px;/*设置背景*/background: url(../img/line.png) no-repeat bottom center;
}/** 中间的三个div*/
.content .pl , .content .cs , .content .uc{/*向左浮动*/float: left;width: 300px;
}/** 给div添加左右边距*/
.content .cs{margin: 0 20px;
}/*设置div中的标题*/
.content h2{color: #11719e;font: 21px Georgia;
}.content .p1{color: #8c8c8c;font: 12px Helvetica;
}/*设置图片div*/
.content .imgDiv{width: 299px;height: 190px;background: url(../img/img-bg.png) no-repeat;/*设置上下外边距*/margin: 16px 0px 10px 0px;/*设置水平居中*/text-align: center;/*设置上内边距*/padding-top: 12px;
}/*设置第二个段落*/
.content .p2{height: 92px;color: #3e3e3e;font: 13px Helvetica;word-spacing: 2px;
}/*** 设置按钮的样式*/
.content .lm{/*设置块元素*/display: block;/*设置宽和高*/width: 163px;height: 40px;/*设置背景*/background: url(../img/btn1.png) no-repeat;/*设置下划线*/text-decoration: none;/*设置文字*/color: #016999;font: 12px/40px Helvetica ;/*设置文字的缩进*/text-indent: 1em;/*设置下外边距*/margin-bottom: 35px;
}

reset.css

/* v2.0 | 20110126http://meyerweb.com/eric/tools/css/reset/ License: none (public domain)
*/
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-size: 100%;font: inherit;vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;
}
body {line-height: 1;
}
ol, ul {list-style: none;
}
blockquote, q {quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;
}
table {border-collapse: collapse;border-spacing: 0;
}

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>POLO360练习</title><!-- 引入reset.css用来清除浏览器的默认样式 --><link rel="stylesheet" type="text/css" href="css/reset.css"/><!-- 引入page-index --><link rel="stylesheet" type="text/css" href="css/page-index.css"/></head><body><!-- id class和文件的命名规范- 命名时尽量使用英文，如果不会可以使用拼音但是不要英文和拼音混用- 命名格式- 驼峰命名法- 首字母小写，每个单词的开头字母大写例子：aaaBbbCcc helloWorld- 也可以所有的字母都小写，单词之间使用_或-链接aaa_bbb_ccc aaa-bbb-ccc--><!--创建头部div header--><!--header开始--><div class="header w"><!-- 创建一个导航条 --><ul class="nav"><li><a href="#">HOME</a><p>Back to home</p></li><li><a href="#">PRODUCTS</a><p>What we have for you</p></li><li><a href="#">SERVICES</a><p>Things we do</p></li><li><a href="#">BLOG</a><p>Follow our updates</p></li><li><a href="#">CONTACT</a><p>Ways to reach us</p></li></ul><!-- 在div中设置logo --><div class="logo"><a href="#" title="一个非常非常好的网站"><img src="img/logo.png" alt="网站的logo" /></a></div></div><!--header结束--><!--banner开始--><div class="banner w"><img src="img/banner/banner01.png" alt="这是一个图片" /><!-- 创建一个div，用于放置导航按钮 --><div class="pointerDiv"><a href="#"></a><a class="active" href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a></div></div><!--banner结束--><!--content开始--><div class="content w clearfix"><h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1><!-- 放置内容的三个div --><div class="pl"><h2>Perfect Logic</h2><p class="p1">All you want your website to do.</p><!-- 创建图片的div --><div class="imgDiv"><img src="img/pic/pic1.jpg" alt="小男孩" /></div><p class="p2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt </p><a class="lm" href="#">Learn More</a></div><div class="cs"><h2>Complete Solution</h2><p class="p1">A tool anything and everything you can think</p><!-- 创建图片的div --><div class="imgDiv"><img src="img/pic/pic2.jpg" alt="小女孩" /></div><p class="p2">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciun tdolore magnam aliquam quaerat voluptatem.</p><a class="lm" href="#">Learn More</a></div><div class="uc"><h2>Uber Culture</h2><p class="p1">Fresh. Modern and ready for future</p><!-- 创建图片的div --><div class="imgDiv"><img src="img/pic/pic3.jpg" alt="大绿球" /></div><p class="p2">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p><a class="lm" href="#">Learn More</a></div></div><!--content结束--><!-- 处理ie6的png问题 --><!--[if IE 6]><script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script><script type="text/javascript">DD_belatedPNG.fix("div,img,a,h1");</script><![endif]--></body>
</html>

css基础知识汇总9相关推荐

CSS基础知识汇总{主要内容： CSS语法结构，类选择器，后代选择器，交集选择器等}
1.CSS的作用: 通过css达到美化网页的效果 2.选择器: ✔ 基础选择器(重点) ◆标签选择器(重点学习) ◆类选择器(重点学习) ◆ID选择器 ◆通配符选择器 ✔ 复合选择器(重点) ◆后代选 ...
关于前端的HTML+CSS基础知识汇总（较为全面）
这里写目录标题初识空元素的两种写法元素之间的嵌套标准的文档结构(告诉浏览器当前使用的 HTML 标准是 html5.) 语义化什么是语义化? 为什么需要语义化? 文本元素 h p span( ...
前端html+css基础知识汇总（个人学习内容总结，希望对你有帮助内含部分代码）
*小知识点 0.定位和浮动做布局,移动transform做效果例如;京东盒子上升效果快捷键:ctrl+f 快速查找 ctrl+g 快速跳转行号 1.text-aline:center可以让什么元素 ...
脑科学与脑电基础知识汇总
点击上面"脑机接口社区"关注我们更多技术干货第一时间送达脑科学与脑电基础知识汇总该部分汇总了社区分享的部分脑科学.EEG.fNIRS.BCI.人机交互等相关知识. 脑电与情绪 ...
python基础知识资料-Python基础知识汇总
原标题:Python基础知识汇总 1.Anaconda的安装百度Anaconda的官网,下载左边的Python3.X版本然后是设置路径,最后给出Jupyter notebook.具体参考: 猴子: ...
python基础知识资料-学习Python列表的基础知识汇总
千里之行,始于足下.要练成一双洞悉一切的眼睛,还是得先把基本功扎扎实实地学好.今天,本喵带大家仔细温习一下Python的列表.温故而知新,不亦说乎. 当然,温习的同时也要发散思考,因为有些看似无关紧要 ...
css点击a标签显示下划线_好程序员HTML5培训教程-html和css基础知识
好程序员HTML5培训教程-html和css基础知识,Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. Css ...
〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构:HTML文件的固定结构:<html><head>...</head><b ...
HTML/CSS基础知识（四）
WEB标准和W3C的理解与认识 Web标准是一系列标准的集合. 网页主要由三部分组成:结构(Structure).表现(Presentation)和行为(Behavior). 对应的标准也分三方面:结 ...
html css基础知识
1 这是自己学习html时候做的一些记录,供大家参考 <!-- 2 块和内联3 块元素:独占一行的元素4 div p h ul5 div没有任何语义,就是一个纯粹的快元素6 就是为了方便布局7 ...

css基础知识汇总9

css基础知识汇总9相关推荐

最新文章

热门文章