博客记录前端小白练习成果，目标写100篇，此次练习花费三天，内容涉及HTML和CSS部分，体现了小白努力提升前端技能的过程。
这是第四篇，目标练习100篇，前端小白努力变强
写一写停一停居然写了三天。
这是html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="css/mofang.css" rel="stylesheet" />
</head>
<body>
<div class="xzzs-xzzs">
<img src="img/xzzs (1).jpg" alt="">
</div>
<div class="xzzs-gzh">
<img src="img/xzzs (2).jpg" />
</div>
<div class="tb-box">
<!-- 头部的盒子，负责装里面的内容，背景等等。 -->
<div class="tb-box-juzhong">
<!-- 这个盒子用来居中，放里面元素 -->
<h1>
<!-- 我看阅文他这里这么写，我就试一下 -->
<a href="">
<img src="img/ruiwei-logo.jpg" alt="">
</a>
</h1>
<ul>
<li class="shouye">首页</li>
<li class="zuojiafuli">
<p>作家福利</p>
</li>
<li>文章</li>
<li>专栏</li>
<li>资讯</li>
<li>话题</li>
<li><img src="img/xz.jpg" alt="">下载助手</li>
</ul>
<div class="tb-box-youbian">
<ul>
<li>
<div id="cwzj">成为作家</div>
</li>
<li>
<div>登录</div>
</li>
<li><img src="img/wenhao.jpg" alt=""></li>
</ul>
</div>
</div>
</div>
<div class="lbt">
<!-- 这里没照阅文的区域抄，因为比较懒惰，不想一口气写完，休息一下。 -->
<div class="zb-lbt">
<img src="img/lbt1.jpg" alt="">
</div>
<div class="yb-lbt">
<img src="img/lbt2.png" alt="">
</div>
</div>
<div class="nr-juz">
<!-- 约束左右两个盒子 -->
<div class="nr-zb">
<div class="tjht">
<div class="tjht-t">
<h4>推荐话题</h4>
<span>更多></span>
</div>
<div class="tjnr">
<ul>
<li>
<h4>打击盗版:隐秘的战斗</h4>
<span>6928 阅读*96 观点</span>
<input type="button" value="参与讨论">
</li>
<li>
<h4>女作家男频闯关攻略</h4>
<span>6928 阅读*96 观点</span>
<input type="button" value="参与讨论">
</li>
<li>
<h4>四月开书写什么？</h4>
<span>6928 阅读*96 观点</span>
<input type="button" value="参与讨论">
</li>
<li>
<h4>条条大路同天王</h4>
<span>6928 阅读*96 观点</span>
<input type="button" value="参与讨论">
</li>
<li>
<h4>qq阅读，新人也能月入过万</h4>
<span>6928 阅读*96 观点</span>
<input type="button" value="参与讨论">
</li>
<li>
<h4>打击盗版:隐秘的战斗</h4>
<span>6928 阅读*96 观点</span>
<input type="button" value="参与讨论">
</li>
</ul>
</div>
</div>
<div class="tjwz">
<div class="tjwz-all">
<h4>推荐文章</h4>
<span>更多></span>
</div>
<div class="wenzhang">
<ul>
<li>
<div class="li-fdbox">
<p>推荐课程</p>
<h4>出走八万里：从希区柯克的炸弹浅谈网文期待感</h4>
<em>前两天收到编辑的邀请，写一篇关于创作经验之类的文章。微末之学，诚惶诚恐，只能说谈一点个人浅见，请诸位指正。</em>
<div>
<p>2023-06-09阅读 1.5 万</p>
<img src/ />
</div>
</div>
<div class="li-fdimg">
<img src="img/sds.jpg" alt="">
</div>
</li>
<li>
<div class="li-fdbox">
<p>推荐课程</p>
<h4>出走八万里：从希区柯克的炸弹浅谈网文期待感</h4>
<em>前两天收到编辑的邀请，写一篇关于创作经验之类的文章。微末之学，诚惶诚恐，只能说谈一点个人浅见，请诸位指正。</em>
<div>
<p>2023-06-09阅读 1.5 万</p>
<img src/ />
</div>
</div>
<div class="li-fdimg">
<img src="img/sds.jpg" alt="">
</div>
</li>
<li>
<div class="li-fdbox">
<p>推荐课程</p>
<h4>出走八万里：从希区柯克的炸弹浅谈网文期待感</h4>
<em>前两天收到编辑的邀请，写一篇关于创作经验之类的文章。微末之学，诚惶诚恐，只能说谈一点个人浅见，请诸位指正。</em>
<div>
<p>2023-06-09阅读 1.5 万</p>
<img src/ />
</div>
</div>
<div class="li-fdimg">
<img src="img/sds.jpg" alt="">
</div>
</li>
</ul>
</div>
</div>
<div class="tjzl">
<div class="tjzl-nb">
<h4>推荐专栏</h4>
<span>更多></span>
</div>
<div class="tjzl-nei">
<ul>
<li>
<img src="img/1906033779b8bcf03027082e085b8a6c1958703906.jpg" /
style="height: 200px; width: 150px;">
<div>
<p> 写小说可以YY什么？</p>
<p> 网络小说的文字需求？</p>
<p>不会写开头怎么办</p>
</div>
</li>
<li>
<img src="img/1906033779b8bcf03027082e085b8a6c1958703906.jpg" /
style="height: 200px; width: 150px;">
<div>
<p> 写小说可以YY什么？</p>
<p> 写小说可以YY什么？</p>
<p> 写小说可以YY什么？</p>
</div>
</li>
</ul>
</div>
</div>
<div class="zxwz">
<div class=" zxwz-top">
<h4>最新文章</h4>
<span>更多></span>
</div>
<ul>
<li>
<div class="zxwz-z">
<p>推荐课程</p>
<h4>新人推荐题材的选择（一） </h4>
<em>很多作者开新书，都会在题材的选择上犹豫很久，不知道到底去写什么题材，然后看榜单的时候也会发现，怎么感觉都看不下去，或者说都是一些看不太懂的东西。</em>
<p>2024-04-17 阅读 1.7 万</p>
</div>
<div class="izxwz-y">
<img src="img/DM_20240421140140_001.webp" alt="" style="width: 100%;height: 100%;">
</div>
</li>
<li>
<div class="zxwz-z">
<p>推荐课程</p>
<h4>新人推荐题材的选择（一） </h4>
<em>很多作者开新书，都会在题材的选择上犹豫很久，不知道到底去写什么题材，然后看榜单的时候也会发现，怎么感觉都看不下去，或者说都是一些看不太懂的东西。</em>
<p>2024-04-17 阅读 1.7 万</p>
</div>
<div class="izxwz-y">
<img src="img/DM_20240421140140_001.webp" alt="" style="width: 100%;height: 100%;">
</div>
</li>
<li>
<div class="zxwz-z">
<p>推荐课程</p>
<h4>新人推荐题材的选择（一） </h4>
<em>很多作者开新书，都会在题材的选择上犹豫很久，不知道到底去写什么题材，然后看榜单的时候也会发现，怎么感觉都看不下去，或者说都是一些看不太懂的东西。</em>
<p>2024-04-17 阅读 1.7 万</p>
</div>
<div class="izxwz-y">
<img src="img/DM_20240421140140_001.webp" alt="" style="width: 100%;height: 100%;">
</div>
</li>
<li>
<div class="zxwz-z">
<p>推荐课程</p>
<h4>新人推荐题材的选择（一） </h4>
<em>很多作者开新书，都会在题材的选择上犹豫很久，不知道到底去写什么题材，然后看榜单的时候也会发现，怎么感觉都看不下去，或者说都是一些看不太懂的东西。</em>
<p>2024-04-17 阅读 1.7 万</p>
</div>
<div class="izxwz-y">
<img src="img/DM_20240421140140_001.webp" alt="" style="width: 100%;height: 100%;">
</div>
</li>
<li>
<div class="zxwz-z">
<p>推荐课程</p>
<h4>新人推荐题材的选择（一） </h4>
<em>很多作者开新书，都会在题材的选择上犹豫很久，不知道到底去写什么题材，然后看榜单的时候也会发现，怎么感觉都看不下去，或者说都是一些看不太懂的东西。</em>
<p>2024-04-17 阅读 1.7 万</p>
</div>
<div class="izxwz-y">
<img src="img/DM_20240421140140_001.webp" alt="" style="width: 100%;height: 100%;">
</div>
</ul>
</div>
</div>
<div class="nr-yb">
<div class="zjzx">
<div>
<h4>
作家咨询
</h4>
<span>
更多
</span>
</div>
<ul>
<li>
<p>阅文近期资讯速览</p>
<img src="img/DM_20240421142352_001.png" alt="">
</li>
<li>
<p>阅文近期资讯速览</p>
<img src="img/DM_20240421142352_001.png" alt="">
</li>
<li>
<p>阅文近期资讯速览</p>
<img src="img/DM_20240421142352_001.png" alt="">
</li>
</ul>
</div>
<div class="lxbj">
<ul>
<li><img src="img/ssw (1).jpg" alt=""></li>
<li><img src="img/ssw (2).jpg" alt=""></li>
<li><img src="img/ssw (3).jpg" alt=""></li>
</ul>
</div>
<div class="zh">
<img src="img/zh.jpg" alt="">
</div>
</div>
</div>
<div class="mw-bjb">
<!-- 作为背景板 -->
<div class="zjdq-bjb">
<div class="bjb-1">
<div class="bjb-z">
<h4>阅文集团旗下品牌</h4>
<ul>
<li>起点中文网</li>
<li>创世中文网</li>
<li>九天中文网</li>
<li>昆仑中文网</li>
</ul>
<ul>
<li>起点中文网</li>
<li>创世中文网</li>
<li>九天中文网</li>
<li>昆仑中文网</li>
</ul>
<ul>
<li>起点中文网</li>
<li>创世中文网</li>
<li>九天中文网</li>
<li>昆仑中文网</li>
</ul>
<ul>
<li>起点中文网</li>
<li>创世中文网</li>
<li>九天中文网</li>
<li>昆仑中文网</li>
</ul>
</div>
<img src="img/ywjt.jpg" alt="">
</div>
<div class="bjb-2">
<div>
<span>帮助中心</span>
<span>联系我们 </span>
<span>关于我们</span>
<span>诚聘英才 </span>
<span>版权信息 </span>
<span>漏洞提交</span>
</div>
<p>Copyright © 2024 xxxx.xx.com All Rights Reserved xx信息技术有限公司 版权所有 本网站由xx提供服务器和带宽支持
客服和举报电话xxxxxxxxx51</p>
<p> Copyright © 2024 xxxx.xx.com All Rights Reserved xx信息技术有限公司 版权所有 本网站由xx提供服务器和带宽支持
客服和举报电话xxxxxxxxx51</p>
<div>
<span><img src="img/miya.jpg" alt=""></span>
<span><img src="img/miya.jpg" alt=""></span>
<span><img src="img/miya.jpg" alt=""></span>
<span><img src="img/miya.jpg" alt=""></span>
<span><img src="img/miya.jpg" alt=""></span>
</div>
</div>
</div>
</div>
</body>
</html>
这是css部分
* {
margin: 0;
padding: 0;
}
.tb-box {
width: 100%;
height: 70px;
/* border-bottom: 3px solid black; */
box-shadow: 1px 1px 3px 1px lightslategray;
}
.tb-box-juzhong {
margin: 0 auto;
height: 70px;
width: 1090px;
}
.tb-box-juzhong>h1 img {
padding: 2px;
float: left;
margin-right: 33px;
}
.tb-box-juzhong>ul {
list-style: none;
}
.tb-box-juzhong>ul>li {
float: left;
padding: 25px 7px;
}
.shouye {
font-weight: 800;
}
.zuojiafuli p {
padding: 0 20px;
border-right: 2px solid black;
}
.tb-box-juzhong>ul>li img {
vertical-align: middle;
}
.tb-box-youbian {
float: right;
}
.tb-box-youbian ul {
list-style: none;
}
.tb-box-youbian ul li {
float: right;
padding: 20px 10px;
}
.tb-box-youbian ul li div {
border: 1px solid rgb(191, 191, 191);
padding: 5px 15px;
border-radius: 7px;
}
#cwzj {
color: aliceblue;
background-color: blue;
}
.lbt {
height: 215px;
width: 1090px;
margin: 20px auto;
}
.zb-lbt {
width: 720px;
height: 215px;
float: left;
border-radius: 10px;
}
.yb-lbt {
width: 352px;
height: 215px;
float: right;
}
.lbt img {
width: 100%;
border-radius: 10px;
}
.nr-juz {
margin: 10px auto;
width: 1090px;
height: 2444px;
}
.nr-zb {
width: 720px;
height: 2444px;
float: left;
}
.nr-yb {
height: 1334px;
width: 352px;
float: right;
}
.mw-bjb {
width: 100%;
height: 400px;
/* background-color: aqua; */
margin-top: 70px;
}
.tjht .tjht-t {
height: 14px;
padding: 23px;
}
.tjht div h4 {
float: left;
}
.tjht div span {
float: right;
color: cadetblue;
font-size: 14px;
}
.tjnr ul {
list-style: none;
}
.tjnr ul li {
width: 215px;
height: 156px;
float: left;
margin: 10px;
text-align: center;
border: 2px solid blueviolet;
border-top: 2px solid rebeccapurple;
}
.tjnr ul li h4 {
width: 169px;
height: 10px;
margin-bottom: 15px;
padding: 23px;
text-align: left;
}
.tjnr ul li>span {
display: block;
width: 215px;
padding-right: 25px;
}
.tjnr ul li>input {
padding: 5px;
margin-top: 21px;
margin-right: 6.25rem;
}
.tjht {
width: 720px;
height: 440px;
box-shadow: 0px 0px 2px 2px powderblue;
}
.tjwz {
width: 719px;
height: 624px;
margin-top: 20px;
box-shadow: 0px 0px 2px 2px powderblue;
}
.tjwz-all {
width: 679px;
height: 20px;
border-bottom: 1px solid cadetblue;
padding: 20px;
}
.tjwz .tjwz-all h4 {
float: left;
}
.tjwz .tjwz-all span {
float: right;
font-size: 14px;
color: cadetblue;
}
.wenzhang {
height: 562px;
width: 719px;
}
.wenzhang ul {
padding: 20px;
list-style: none;
}
.wenzhang ul p {
color: cadetblue;
font-size: 14px;
}
.tjwz .wenzhang ul li {
width: 670px;
height: 17px;
margin-top: -15px;
}
.li-fdbox {
float: left;
width: 522px;
height: 137px;
padding-bottom: 44px;
}
.li-fdimg {
width: 119px;
height: 119px;
float: right;
}
.tjzl {
width: 719px;
height: 260px;
margin-top: 20px;
box-shadow: 0px 0px 2px 2px powderblue;
}
.tjzl-nb {
padding: 20px;
height: 20px;
width: 679px;
}
.tjzl-nb h4 {
float: left;
}
.tjzl-nb span {
float: right;
font-size: 15px;
color: cadetblue;
}
.tjzl-nei {
height: 200px;
width: 719px;
}
.tjzl-nei ul {
list-style: none;
padding: 0 25px;
}
.tjzl-nei li {
float: left;
height: 200px;
width: 330px;
}
.tjzl-nei li img,
.tjzl-nei li div {
float: left;
}
.tjzl-nei li div p {
margin-bottom: 30px;
padding-left: 10px;
}
.zxwz {
height: 875px;
width: 719px;
margin-top: 20px;
box-shadow: 0px 0px 2px 2px powderblue;
}
.zxwz-top {
padding: 20px;
height: 20px;
border-bottom: 2px solid black;
}
.zxwz-top h4 {
float: left;
}
.zxwz-top span {
float: right;
font-size: 14px;
color: cadetblue;
}
.zxwz ul {
list-style: none;
padding: 20px;
height: 775px;
}
.zxwz ul li {
height: 150px;
margin-top: 10px;
}
.zxwz-z {
width: 435px;
height: 140px;
float: left;
}
.izxwz-y {
height: 140px;
width: 197px;
float: right;
}
.zjzx {
width: 352px;
height: 307px;
margin-bottom: 20px;
}
.zjzx>div {
padding: 20px;
height: 15px;
border-bottom: 2px solid black;
}
.zjzx>div h4 {
float: left;
}
.zjzx>div span {
float: right;
font-size: 14px;
color: cadetblue;
}
.zjzx ul {
list-style: none;
}
.zjzx>ul li p {
width: 160px;
padding: 30px 20px;
float: left;
}
.zjzx>ul li img {
width: 68px;
float: right;
}
.lxbj li {
list-style: none;
width: 352px;
height: 192px;
margin-bottom: 20px;
}
.lxbj li img {
width: 100%;
height: 100%;
}
.zh {
width: 352px;
/* height: 380px; */
}
.zh img {
width: 100%;
height: 100%;
}
.xzzs-xzzs {
position: fixed;
top: 80%;
right: 10px;
width: 60px;
height: 60px;
margin-right: 40px;
}
.xzzs-gzh {
position: fixed;
top: 80%;
right: 10px;
width: 60px;
height: 60px;
margin-top: 80px;
margin-right: 40px;
}
.xzzs-xzzs img,
.xzzs-gzh img {
width: 100%;
height: 100%;
}
.zjdq-bjb {
width: 1024px;
height: 400px;
/* background-color: aquamarine; */
margin: 0 auto;
border-top: 2px solid darkgrey;
}
.bjb-1 {
width: 1024px;
height: 250px;
/* background-color: blue; */
border-bottom: 2px solid darkgrey;
}
.bjb-z {
padding: 20px 0;
}
.bjb-z ul {
float: left;
width: 107px;
height: 155px;
list-style: none;
/* background-color: rebeccapurple; */
margin-right: 20px;
}
.bjb-z ul li {
padding: 10px 0;
}
.bjb-1 img {
float: right;
}
.bjb-2 span {
display: inline-block;
padding: 20px;
}
.bjb-2 p {
font-size: 12px;
color: cadetblue;
}
.bjb-2 img {
width: 160px;
}
祝你身体健康
有缘再见
扫一扫
405
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
