冬季小学期 NIIT公司 web前端培训 CSS

外边距合并 http://www.w3school.com.cn/css/css_margin_collapsing.asp

div、p、h1 块元素 span行元素

浮动：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

http://www.w3school.com.cn/css/css_positioning_floating.asp

css模块化思想（一）--------命名是个技术活 http://www.cnblogs.com/WebShare-hilda/p/4686067.html

这样的命名注视、注释应该是正规公司上会用到的。

编码规范 http://codeguide.bootcss.com/ 编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。

<!DOCTYPE html>
<html>
<head><title>title Web tutorials on HTML, CSS</title><meta name="description" content="Web tutorials on HTML, CSS,javascript" /><!--浏览器缺省设置外部样式表内部样式表（位于 <head> 标签内部）内联样式（在 HTML 元素内部） 优先级高 就近原则--><!-- 链接外部css文件 --><link rel="stylesheet" href="xx.css" type="text/css"><style type="text/css">/*css语法 ：选择器{属性名1:属性值1;属性名2：属性2,属性2; }*/body{font-family: 微软雅黑;font-size: 14px;}#container{width: 900px;/*margin: 0 auto;*/}#header{height: 100px;background-color: blue;}#menu{height:30px ;background-color: yellow;margin-top: 5px;}#content{height: 500px;margin-top: 5px;}#left{width: 28%;height: inherit;background-color: pink;float: left;}#position{position: relative;/*相对*/position: static;/*正常*/}#mid{width: 40%;height: inherit;background-color: purple;float: left;margin-left: 2%; }#right{width: 28%;height: inherit;background-color: cyan;float: left;margin-left: 2%; }#footer{height: 100px;margin-top: 5px;background-color: green;}table{border:2px solid green ;/*双线条边框 double    定义双线。*/border-collapse: collapse;/*变单线条边框*//*border-spacing:10px 10px;/*单元格边框的距离。*/*/font-family:Arial;width: 100%;}th,td{font-size:1em;border: 1px solid #98bf21;padding: 3px 7px 2px 7px; }th{font-size: 1.1em;text-align: left;;padding-top: 5px;padding-bottom: 4px;background-color: #A7c942;color: #FFFFFF;}/*派生选择器 （组合选择器）*/tr.alt td{color: #0000000;background-color: #EAF2D3;}/*元素选择器*/p {text-indent: 5em;/*首行缩进5em*/text-align: center;/*居中*/word-spacing: 30px;/*词间距*/letter-spacing: 20px;/*字母间距*/text-transform: capitalize;/*单词首字母大写*/text-decoration: underline;/*文本装饰效果具有下划线*/line-height: 10px;/*行间距*/}/*所有连接空白符合并为一个空格*//*id选择器  id 属性只能在每个 HTML 文档中出现一次*/#outer{width: 300px;height: 300px;border: 1px solid #f00;margin: auto;/*上开始 顺时针  auto居中*/margin: 30px 50px;/*上下，左右 两个值*/background-color:black; }#inner{width: 150px;height: 150ps;border: 5px solid white;padding: 10px;background-color: purple;}div#test {background-color: #99bbbb;/*背景颜色*/background-image: url(test.jpg);/*背景图片 url()*/background-repeat: repeat-y;/*图片垂直重复 no-repeat repeat-x repeat-y repeat*/background-position: center;/*常用位置关系 left center right top bottom 可以复合使用 一般先水平后垂直*/background-position: 30% 70%;/*单位为百分比*/background-position: 50px 100px;/*单位为像素*/background-attachment:fixed;/*相对于可视区是固定的*/background-size: cover;/*CSS3 图片适应边框*/background: url(test.jpg) 0 0 no-repeat;/*空格空开对应的值*/}/*类选择器*/.class1 {font-family: Georgia,serif;/*首选Georgia，没有则选择serif字体*/style="font-family: Times,'New York'; font-style: italic;font-weight: bold;/*字体粗体 italic斜体*/font-weight: 900;"/*100~900级别的加粗度 */font-size: 14px;/*设置字体大小像素*/font-size: 0.87em;/*1em等于当前字体尺寸 浏览器默认的文本大小16px*/}ul{width: 240px;height: 259px;background: url('images/menu-bg.jpg') 0 0 no-repeat;font-size: 13px;font-weight: bold;padding: 40px 0 0 50px;}ul li{background: url('images/homebg.gif') 0 0 no-repeat;padding:  0 0 0 25px;line-height: 28px;}ul li a:hover{color: cyan;}/*属性选择器*/[title=list]{list-style-type:none;/*列表前面没有点*//*list-style-image: url('images/arrow-normal.gif');选择列表前面的图标*/}.class2 {a:link {color:#FF0000;}        /* 未被访问的链接 */a:visited {color:#00FF00;}    /* 已被访问的链接 */a:hover {color:#FF00FF;}    /* 鼠标指针移动到链接上 */a:active {color:#0000FF;/* 正在被点击的链接 */}    /*a:hover 必须位于 a:link 和 a:visited 之后a:active 必须位于 a:hover 之后*/</style>
</head>
<body>
<table><tr><th>学号</th><th>姓名</th></tr><tr><td>27</td><td>bao</td></tr><tr class="alt"><td>09</td><td>duan</td></tr><tr><td>32</td><td>junjie</td></tr><tr class="alt"><td>31</td><td>zhi</td></tr>
</table><div id="outer"><div id="inner">inner</div>
</div>
<!-- 学会div布局 -->
<div id="container"><div id="header">header</div><div id="menu">menu</div><div id="content"><div id="left">leftpanle</div><div id="mid">middlepanle</div><div id="right">rightpanle</div></div><div id="footer">footer</div>
</div><ul title="list"><li  ><a href="#" >home</a></li><li><a href="#">about us</a></li><li><a href="#">network</a></li><li><a href="#">submission</a></li><li><a href="#">archives</a></li>
</ul></body>
</html>

White

纯白

#FFFFFF

255,255,255

Black

纯黑

#000000

0,0,0

Yellow

纯黄

#FFFF00

255,255,0

Cyan

青色

#00FFFF

0,255,255

Magenta

洋红

#FF00FF

255,0,255

在学习CSS http://www.w3school.com.cn/css/css_selector_descendant.asp

margin:top right bottom left

转载于:https://www.cnblogs.com/linkarl/p/5144101.html

冬季小学期 NIIT公司 web前端培训 CSS相关推荐

web前端培训—css源码笔记（二）【爱创课堂】
复习: css介绍:cascading style sheet 层叠样式表引入css目的: 引入css好处: css组成:选择符和声明,声明包括样式和样式值 css引入方式 css文件本身不 ...
哪些人适合学web前端培训呢
哪些人适合学web前端培训呢?经常会有人问到这个问题,因为互联网对于很多人来说是非常具有诱惑力的,前端便是其中的一种互联网技术,那么针对这个问题,我们来看看下面的详细介绍吧. 哪些人适合学web前端培 ...
Web前端培训面试攻略
学会web前端技术之后,接下来就是要找到一份合适的工作,今天小编要跟大家分享的文章是关于web前端面试攻略,做好这些可以给面试环节加分,找到合适的工作几率会更高,希望本篇文章能够对大家有所帮助. ...
如何选择web前端培训机构？
随着web前端需求量的日益增加,企业对前端人员的技能要求也越来越高,我们如何能学到满足企业的web前端技能,向着名企前进!因此,选择一个好的web前端培训机构至关重要,在此给大家几点如何选择好培训机构 ...
现在参加Web前端培训后好就业吗?
选在参加Web前端培训后好就业吗?在目前互联网时代,只要公司有需要开发互联网产品,包括网站.网页.H5.小程序.APP等等,就需要前端开发工程师岗位,具体的就业方向还可以按公司的技术需求来区分,侧重点 ...
web前端培训的未来就业前景怎么样?
web前端在互联网行业的快速发展,依然有人想知道web前端培训的未来就业前景怎么样?小编想要说的是无论是PC端还是APP端的应用,前端样式都离不开HTML5,通过手机与电脑上网的使用率来看,从事htm ...
如何分辨Web前端培训机构的好坏
web前端在互联网行业有着非常高的薪水和很好的前景,想要学习web前端的人越来越多,对于web前端培训机构的选择让很多人犯了难,那么如何分辨Web前端培训机构的好坏呢?该如何选择呢?来看看下面的详细介 ...
advanced installer更换程序id_好程序员web前端培训分享kbone高级-事件系统
好程序员web前端培训分享kbone高级-事件系统:1.用法,对于多页面的应用,在 Web 端可以直接通过 a 标签或者 location 对象进行跳转,但是在小程序中则行不通:同时 Web 端的页面 ...
web 前端如何分享到instagram_如何找到靠谱的Web培训机构?web前端培训机构哪个好？...
现如今Web前端开发应用越来越广泛,Web前端工程师人才需求逐年递增,薪资待遇也是水涨船高,也因此吸引了越来越多的人想要迈入Web前端行业,参加Web前端培训是很多人选择学习前端开发技能的途径,那么W ...

冬季小学期 NIIT公司 web前端培训 CSS

冬季小学期 NIIT公司 web前端培训 CSS相关推荐

最新文章

热门文章