HTML-CSS写抽屉网的置顶区域
程序员文章站
2022-04-24 22:41:51
1.在pycharm的已有工程中新建一个html文件。 2.在标签内部写入要内容： 效果是： 心得： html和css是标签语言，它的使用的初衷是为了在网页上显示出相应的图像或是排版，所以在使用的时候，我目前感觉到最重要的一点就是注意没有单元的位置。为了达到这个目的需要1. ......
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）：
1 基础选择器
＊ ： 通用元素选择器，匹配任何元素 * { 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; }
2 组合选择器
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; }
3 属性选择器
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;}
4 伪类(pseudo-classes)
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
按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。