制作一个简单的HTML个人网页（第一部分）

 

目录

文章目录

制作网易云音乐头部

一、首先准备好相应的文件

二、使用步骤

1.引入自定义的样式（也就是格式化代码）

2.引入各种css

3.网易云头部制作

总结

---

文章目录

---

制作网易云音乐头部

以上是原网站的效果图片 

---

以下是本篇文章正文内容，下面案例可供参考

一、首先准备好相应的文件

准备好以上的文件，以便随时使用 

二、使用步骤

1.引入自定义的样式（也就是格式化代码）

代码如下（示例）：

/* 把我们所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0;
	box-sizing: border-box;
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
    font-style: normal
}
/* 去掉li 的小圆点 */
li {
    list-style: none
}

img {
    /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle
}

button {
    /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}

button,
input {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
	border: 0px;
	outline:none ;
	
}

body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}
/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}
@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?tomleg');
  src:  url('../fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?tomleg') format('truetype'),
    url('../fonts/icomoon.woff?tomleg') format('woff'),
    url('../fonts/icomoon.svg?tomleg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend
,button,input,textarea,th,td{margin:0;padding:0;}
body,button,input,select,textarea{font:12px/1.5tahoma,arial,\5b8b\4f53;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:couriernew,courier,monospace;}
small{font-size:12px;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}

.w{
    width: 1200px;
    margin: 0px auto;
}

以上这个大家也能看的懂，我就不细所了  

2.引入各种css

大家准备好前提工作后就可正式写代码的啦！ （素材我会准备到文章最后面） 

3.网易云头部制作

 <div class="g-topbar">
      <!-- 头部模块一代码展示 -->
      <div class="m-top">
        <div class="warp">
          <div class="log">
            <a href="/#">网易云音乐</a>
          </div>
          <ul class="m-nav">
            <li class="list-nav">
              <a href="#">
                <span> 发现音乐 </span>
              </a>
            </li>
            <li>
              <a href="#"> 我的音乐 </a>
            </li>
            <li>
              <a href="#"> 关于 </a>
            </li>
            <li>
              <a href="#">商城</a>
            </li>
            <li>
              <a href="#">音乐人</a>
            </li>
            <li>
              <a href="#">云推广</a>
            </li>
            <li>
              <a href="#">下载客服端</a>
            </li>
          </ul>
          <div class="srchbg">
            <!-- <img src="./image/sosuo.png" alt="" /> -->
            <img src="./image/sousuo.png" alt="" />
            <span class="parent">
              <input type="text" placeholder="音乐/视频/电台/用户" />
            </span>
          </div>
          <div class="m-topvd">创造者中心</div>
          <div class="link">
            <a href="#"> 登录 </a>
          </div>
        </div>
      </div>
      <!-- 头部模块二代码展示 -->
      <div class="m-subnav">
        <!-- 头部模块nav导航部分 -->
        <div class="m-warp">
          <ul class="m-warp-nav">
            <li class="itme">
              <a href="#" class="one">
                <em class="m-warp-nav-list">推荐</em>
              </a>
            </li>
            <li class="itme">
              <a href="#">
                <em>排行榜</em>
              </a>
            </li>
            <li class="itme">
              <a href="#">
                <em>歌单</em>
              </a>
            </li>
            <li class="">
              <a href="#">
                <em> 主播电台 </em>
              </a>
            </li>
            <li class="itme">
              <a href="#"><em> 歌手 </em></a>
            </li>
            <li class="itme">
              <a href="#"><em> 新碟上架 </em></a>
            </li>
          </ul>
        </div>
      </div>
    </div>

css部分代码

.g-topbar{
    width: 100%;
}
.m-top{
    width: 100%;
    height: 70px;
    background-color: #242424;
    border-bottom: 1px solid #000;
}
.m-subnav{
    width: 100%;
    height: 35px;
    box-sizing: border-box;
    background-color: #C20C0C;
    border-bottom: 1px solid #a40011;
}
.warp{
    position: relative;
    display: flex;
    /* position: relative; */
    width: 1100px;
    margin: 0px auto;
    /* padding-top:17px; */
    /* padding-right: 20px; */
    /* line-height: 70px; */
}
.warp .log{
    position: absolute;
    left: 0px;
    top: 17px;
    width: 157px;
    height: 33px;
    background: url('../image/topbar.png') no-repeat 0px -19px;
    /* line-height: 70px; */
    /* margin-top: 12px; */
    text-indent: -9999px;
    /* vertical-align: middle; */
}
.m-nav{
    position: absolute;
    display: flex;
    line-height:35px;
    margin-left: 20px;
}
.m-nav li{
    position: relative;
    left: 159px;
}
.m-nav li:hover{
    background-color: #000;
}
.m-nav a{
    display: inline-block;
    padding: 0px 19px;
    text-align: center;
    /* line-    height: 70px; */
    color: #ccc;
    font-size: 14px;
    height: 70px;
    line-height: 70px;
}
.list-nav{
    display: block;
    background: #000;
    text-decoration: none;
    color: #fff;
}
.srchbg{
    position: absolute;
    right:165px;
    top: 0%;
    width: 158px;
    height: 32px;
    background-color: white;
    border-radius:20px;
    margin-top:18px;
}
.srchbg img{
    width: 20px;
    height:20px;
    /* display: inline-block; */
    margin-top:7px;
    margin-left: 3px;
}
.srchbg .parent{
    position: relative;
    /* position: absolute; */
    /* right: 0px;
    top: 0px; */
    display: block;
}
.parent input{
    position: absolute;
    right: -8px;
    top: -18px;
    width:85%;
    margin: 0;
    padding: 0;
    background: transparent;
    /* border: 1px solid #000; */
    color: black;
    line-height: 16px;
}
.parent label{
    position: absolute;
    right:0px;
    top: 8px;
}
.m-topvd{
    position: absolute;
    right:60px;
    width: 90px;
    height: 32px;
    margin: 19px 0 0 12px;
    box-sizing: border-box;
    padding-left: 16px;
    border: 1px solid #4F4F4F;
    background-position: 0 -140px;
    line-height: 33px;
    color: #ccc;
    border-radius: 20px;
}
.link a{
    position: absolute;
    right: 0px;
    display: block;
    width: 28px;
    margin-top: 7px;
    color: #787878;
    line-height:60px;
}
/* <!-- 头部模块二代码展示 --> */
.m-warp{
    width: 1100px;
    height: 34px;
    margin: 0px auto;
}
.m-warp-nav{
    display: flex;
    padding-left: 180px;
}
.m-warp-nav a em{
    display: inline-block;
    height: 20px;
    padding: 0 13px;
    margin: 7px 17px 0;
    border-radius: 20px;
    line-height: 21px;
    color: white;
}
.m-warp-nav .li a em:hover{
    background-color: #9B0909;
}
.m-warp-nav-list{
    display: inline-block;
    height: 20px;
    /* padding: 0 13px; */
    /* margin: 7px 17px 0; */
    border-radius: 20px;
    line-height: 21px;
    background-color: #9B0909;
    border-radius: 20px;
    /* padding: 0px;    margin: 0px 0px 0px; */
    /* margin: 0px; */
}

以上是头部制作案例 

 链接: https://pan.baidu.com/s/1_JbOyfAuUh_hajnOgbIs5w?pwd=eyyh 提取码: eyyh 复制这段内容后打开百度网盘手机App，操作更方便哦

 

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。