前端页面练习_前段练习页面-CSDN博客

本文链接：https://blog.csdn.net/xiaogeldx/article/details/85333104

练习.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="https://at.alicdn.com/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都在https://at.alicdn.com/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那新的width值是容器的宽度加上margin的值。（细心观察）就会发现加了  margin相对应的边就会多出设置的空白。而且会多出横向滚动条因为宽度已经超出了屏幕的范围。(这条相对于父容器是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;
  }
  /*https://www.python.org/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("https://www.python.org/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("https://www.python.org/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

/* http://meyerweb.com/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;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a{
    text-decoration: none;
    color: inherit;
}

在这里插入图片描述