前端页⾯练习
练习.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="at.alicdn/t/font_1109734_9st3omjxnh6.css">
<link rel="stylesheet" href="css/test.css">
</head>
<body>
<div class="header">
<!--块级标签，独占⼀⾏-->
<div class="header-box">
<h1 class="logo">
<!--javascript：是伪协议，表⽰url的内容通过javascript执⾏。void(0)表⽰不作任何操作，这样会防⽌链接跳转到其他页⾯。这么做往往是为了保留链接的样式，但不让链接执⾏实际操作，-->
<a href="javascript:void(0)" class="logo-title"></a>
</h1>
<ul class="menu">
<li><a href="#">⾸页</a></li>
<li><a href="javascript:void(0)">在线课堂</a></li>
<li><a href="javascript:void(0)">付费课堂</a></li>
<li><a href="javascript:void(0)">搜索</a></li>
</ul>
<div class="login-box">
<!--iconfont icon-user都在at.alicdn/t/font_1109734_9st3omjxnh6.css中设置的-->
<span class="iconfont icon-user"></span>
<span><a href="javascript:void(0)">注册/</a></span>
<span><a href="javascript:void(0)">登录</a></span>
</div>
</div>
</div>
<div class="footer">
<!--<div class="footer-box">-->
<div class="footer-logo">
<h1><a href="javascript:void(0)" class="logo-title"></a></h1>
<p>
<span><a href="javascript:void (0)">关于Python|</a></span>
<span><a href="javascript:void(0)">Python开发|</a></span>
<span><a href="javascript:void(0)">数据分析</a></span>
</p>
<p>
<a href="javascript:void(0)" class="addr">地址：湖南省长沙市岳麓区练习⽅式：400-1567-315</a>
</p>
</div>
<!--</div>-->
<div class="footer-bottom">
<p>Copyright 2015-2018 潭州python学院. All Rights Reserved</p>
</div>
</div>
</body>
</html>
test.css的代码：
.header {
/
*最外层⽤100%width拉伸也不会断*/
/*width:100% 并不包含margin-left  margin-right的属性值，直接取其⽗容器的宽度加上含margin-left /margin-right的值。如果设置了margin那新的widt h值是容器的宽度加上margin的值。（细⼼观察）就会发现加了  margin相对应的边就会多出设置的空⽩。⽽且会多出横向滚动条因为宽度已经超出了屏幕的范围。(这条相对于⽗容器是body)
的范围。(这条相对于⽗容器是body)
width:auto包含margin-left/margin-right的属性值。其值包含margin-left /margin-right的值。width:auto总是占据整⾏这其中margin的值已经包含其中了（也就是⼀整⾏）如果要设置margin的值那就⽤⼀整⾏然后减去margin的值就得到了现在的宽度了。减去的这个值就是相应边得空⽩。显著的特征是这个没有横向滚动条出现也就是宽度没有增加
width:auto；会将元素撑开⾄整个⽗元素width，但是会减去⼦节点⾃⼰的margin，padding或者border的⼤⼩
width:100%；会强制将元素变成和⽗元素⼀样的宽，并且添加额外的空间到这个元素的width上。就是因为这个，会导致很多问题。*/
width: 100%;
/*width: 100%;*/
background-color: black;
height: 69px;
}
.header .header-box {
/*.header-box {*/
width:1200px;
/*width:auto;*/
height: 69px;
/*line-height⾏⾼，使标签垂直居中*/
line-height: 69px;
background-color: black;
}
/*/static/img/python-logo.png*/
.header .header-box .logo {
/*.header-box .logo {*/
width: 235px;
height: 64px;
/*margin: auto;*/
line-height: 69px;
float: left;
}
.header .header-box .logo .logo-title {
/*.header-box .logo .logo-title {*/
width: 100%;
height: 100%;
/*display 属性规定元素应该⽣成的框的类型*/
/*block 此元素将显⽰为块级元素，此元素前后会带有换⾏符*/
background-image: url("/static/img/python-logo.png");
display: block;
}
.header .header-box .menu {
/
*.header-box .menu {*/
/*去除列表前⾯的点*/
list-style: none;
float: left;
color: white;
margin-left: 100px;
}
.header .header-box .menu li {
/*.header-box .menu li {*/
height: 69px;
float: left;
/
*text-align: center;*/      /*字体居中*/
padding: 0 30px;
}
.header .header-box .menu .li a {
/*.header-box .menu .li a {*/
/*color: white;*/
/*去除下划线*/
text-decoration: none;
}
.header .header-box .menu li:hover {
/*.header-box .menu li:hover {*/
/
*下划线*/
border-bottom: 4px solid blue;
/*border-box */
/*为元素设定的宽度和⾼度决定了元素的边框盒。*/
/*就是说，为元素指定的任何内边距和边框都将在已设定的宽度和⾼度内进⾏绘制。*/
/*就是说，为元素指定的任何内边距和边框都将在已设定的宽度和⾼度内进⾏绘制。*/      /*通过从已设定的宽度和⾼度分别减去边框和内边距才能得到内容的宽度和⾼度。*/      box-sizing: border-box;
}
.header .header-box .login-box {
/*.header-box .login-box {*/
float: right;
color: white;
}
.icon-user:before {
font-size: 25px;
}
.footer {
width: 100%;
}
.footer .footer-logo {
background-color: wheat;
width: 100%;
height: 100px;
/
*padding: 0 30px;*/
/*text-align: center;*/
line-height: 100px;
margin: auto;
}
/*.footer .footer-logo {*/
/*height: 100%;*/
/*width: 100%;*/
/*}*/
.footer .footer-logo p {
/*float: left;*/
width: 1200px;
/*⾏⾼设置⼀半使两组标签分两⾏，如果设置为100px，只能显⽰第⼀组标签*/
line-height: 50px;
/*float: left;*/
text-align: center;
margin: auto;
/*padding: 0 30px;*/
}
.footer .footer-logo .addr {
/*float: left;*/
margin-left: -230px;
}
.footer .footer-logo .logo-title {
width: 235px;
height: 64px;
background-image: url("/static/img/python-logo.png");
display: block;
float: left;
margin-top: 11px;
}
.footer .footer-bottom {
background-color: black;
width: 100%;
height: 69px;
color: white;
}
.footer .footer-bottom p {
/*加width属性会让标签位置基本不随着浏览器窗⼝⼤⼩⽽移动*/
width: 1200px;
line-height: 69px;
text-align: center;
}
reset.css
/
* meyerweb/eric/tools/css/reset/
v2.0 | 20110126
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;html span 居中
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a{
text-decoration: none;
color: inherit;
}