1.在pycharm的已有工程中新建一个html文件。
2.在<body></body>标签内部写入要内容:
<div class=‘head-box‘ > <div class="content-box"> <a href="#" class="logo"></a> <div class="action-menu"> <a href="#" class="tb active">全部</a> <a href="#" class="tb">42区 </a> <a href="#" class="tb">段子</a> <a href="#" class="tb">图片</a> <a href="#" class="tb">挨踢1024</a> <a href="#" class="tb">你问我答</a> </div> <div class="key-search"> <form action="" method="post"> <input type="text" class="search-text"> <a href="#" class="i"><span class="ico"></span></a> </form> </div> <div class="action-nav"> <a href="#" class="register-btn tb">注册</a> <a href="#" class="login-btn tb">登入</a> </div> </div></div>
3.在<head></head>标签中写<style></style>标签,在<style></style>标签中编辑css代码,
style标签中内容如下:
*{ margin: 0; padding: 0; } a{ text-decoration: none; } body{ font-family: ‘Times New Roman‘; font-size: 12px; } /*--------------head-----------------*/ .head-box { height: 44px; width: 100%; background-color: #2459a2; position: fixed; top: 0px; left: 0px; } .head-box .content-box{ margin: 0 auto; height: 44px; width: 1016px; /*border: 1px solid yellow;*/ line-height: 44px; } .head-box .content-box .logo{ display: inline-block; background: url(‘images/logo.png‘); height: 23px; width: 123px; float: left; margin-top: 12px; } .head-box .action-menu{ /*border: 2px red solid;*/ width: 410px; height: 44px; float: left; margin-left: 12px; } .head-box .action-menu a{ /*border: 2px black solid;*/ display:inline-block; padding: 0 16px 0 16px; line-height: 44px; color: darkgray; } .head-box .action-menu a.tb:hover{ background-color: #396bb3; color:white; } .head-box .action-menu a.active , .head-box .action-menu a.active:hover{ background-color: #204982; color:white; } .head-box .key-search{ /*border: 1px red solid;*/ height: 44px; width: 200px; float: right; } .head-box .action-nav{ /*border: 1px red solid;*/ height: 44px; width: 200px; float: right; } .head-box .content-box .action-nav a.tb{ color: white; display:inline-block; padding: 0px 30px 0px 30px; float: right; } .head-box .content-box .action-nav a.tb:hover{ background-color:#396bb3; } .head-box .content-box .key-search span.ico{ display: inline-block; background: url("images/icon.png") no-repeat 0 -195px; height:13px; width: 12px; /*border: 1px red solid;*/ float: right; margin-top: 10px; margin-right:10px; } .head-box .content-box .key-search a.i{ display: inline-block; height: 34px; width: 34px; background-color: #f4f4f4; /*border: 1px red solid;*/ float: right; margin-top:4px; margin-right:42px; } .key-search input.search-text{ display: inline-block; height:31px; width:120px; }
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
效果是:
心得:
html和css是标签语言,它的使用的初衷是为了在网页上显示出相应的图像或是排版,所以在使用的时候,我目前感觉到最重要的一点就是注意没有单元的位置。为了达到这个目的需要1.使用(division)div标签,用这一个个盒子将a标签或者是img的标签进行区分2.理清楚盒子之间的嵌套或是并列的关系,(像是在整理东西的感觉)把每个盒子的大小(height, width)、位置(float:left/right;或是使用绝对定位position:fixed;)确定下来。3.最后就是调整盒子内部的元素的位置还有字体颜色(color、background-color)。
style标签中css代码寻找修饰标签的方式css的选择器(Selector):
* : 通用元素选择器,匹配任何元素 * { margin:0; padding:0; }E : 标签选择器,匹配所有使用E标签的元素 p { color:green; }.info和E.info: class选择器,匹配所有class属性中包含info的元素 .info { background:#ff0; } p.info { background:blue; }#info和E#info id选择器,匹配所有id属性等于footer的元素 #info { background:#ff0; } p#info { background:#ff0; }
E,F 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔 div,p { color:#f00; } E F 后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔 li a { font-weight:bold; E > F 子元素选择器,匹配所有E元素的子元素F div > p { color:#f00; } E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F div + p { color:#f00; }
E[att] 匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略,比如“[cheacked]”。以下同。) p[title] { color:#f00; } E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; } E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 td[class~=”name”] { color:#f00; } E[attr^=val] 匹配属性值以指定值开头的每个元素 div[class^="test"]{background:#ffff00;} E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;} E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;}
CSS伪类是用来给选择器添加一些特殊效果。
anchor伪类:专用于控制链接的显示效果
a:link(没有接触过的链接),用于定义了链接的常规状态。a:hover(鼠标放在链接上的状态),用于产生视觉效果。a:visited(访问过的链接),用于阅读文章,能清楚的判断已经访问过的链接。a:active(在链接上按下鼠标时的状态),用于表现鼠标按下时的链接状态。伪类选择器 : 伪类指的是标签的不同状态: a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00FF} /* 鼠标移动到链接上 */a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }
before after伪类 :
:before p:before 在每个<p>元素之前插入内容:after p:after 在每个<p>元素之后插入内容
p:before 在每个 <p> 元素的内容之前插入内容 p:before{content:"hello";color:red} p:after 在每个 <p> 元素的内容之前插入内容 p:after{ content:"hello";color:red}
CSS优先级:
所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。
样式表中的特殊性描述了不同规则的相对权重,它的基本规则是:
1 内联样式表的权值最高 style=""-------------------1000; 2 统计选择符中的ID属性个数。 #id -------------100 3 统计选择符中的CLASS属性个数。 .class -------------10 4 统计选择符中的HTML标签名个数。 p --------------1
按这些规则将数字符串逐位相加,就得到最终的权重,然后在比较取舍时按照从左到右的顺序逐位比较。