CSS基本标签学习8.20

忆如初见 發表於 2021-8-21 16:36:00

<img src="https://img2020.cnblogs.com/blog/2502499/202108/2502499-20210821163106605-1376307220.png">
 
 <img src="https://img2020.cnblogs.com/blog/2502499/202108/2502499-20210821163114871-565445134.png">
 
 <img src="https://img2020.cnblogs.com/blog/2502499/202108/2502499-20210821163127236-977242704.png">
 
 作业：
<div class="cnblogs_code">
<pre><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>山东理工大学</title>
<link rel="shortcut icon" href="./logo.ico">
<link rel="stylesheet" href="sdlg.css">
</head>

<body>

<div class="all">

<div class="head">
 <div class="htop">
 <div class="hleft"></div>
 <div class="hright">
 <div class="hrtop">
 <ul class="a1">
 <li><a class="a3" href="#" target="_blank">在校生</a></li>
 <li><a class="a3" href="#" target="_blank">教职工</a></li>
 <li><a class="a3" href="#" target="_blank">考生</a></li>
 <li><a class="a3" href="#" target="_blank">校友</a></li>
 <li><a class="a3" href="#" target="_blank">访客</a></li>
 </ul>
 </div>
 <div class="hrbottom">
 <table>
 <tr>
 <td><input type="text" name="wenben" class="a4" placeholder="请输入关键字"></td>
 <td><input type="button" name="sousuo" class="a5"></td>
 </tr>
 </table>
 </div>
 </div>
 </div>
 <div class="hbottom">
 <ul class="a2">
 <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>
 <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>
</div>

<div class="lunbo"></div>

<div class="content">

<div class="cleft">
 
 <div class="ltop">

 <div class="clttop"><p class="a7">[更多]</p>
 <div class="clttleft"><p class="a6">学校要闻</p></div>
 <div class="clttright"></div>
 </div>
 <div class="cltconter"><h3 class="a8">省委第三巡视组向山东理工大学党委反馈巡...</h3><p align="center">--</p><p class="a9">本网讯　近日，省委第三巡视组向山东理工大学党委反馈巡视情况。省纪委常委王英霞主持召开向山东理工大学党委书记吕传毅的反馈会议，出席向...[详细]</p></div>
 <div class="cltbottom">
 <ul class="a10">
 <li class="a12"><a href="#">校领导检查暑期修建工程进展情况</a><div class="a11">08-17</div></li>
 </ul >
 <ul class="a10">
 <li class="a12"><a href="#">我校组织收看全省学校疫情防控工作视频会</a><div class="a11">08-08</div></li>
 </ul>
 <ul class="a10">
 <li class="a12"><a href="#">学校召开疫情防控工作领导小组会议</a><div class="a11">08-06</div></li>
 </ul>
 <ul class="a10">
 <li class="a12"><a href="#">吕传毅参加所在党支部现场教学</a><div class="a11">08-02</div></li>
 </ul>
 <ul class="a10">
 <li class="a12"><a href="#">“豪迈杯”第十五届全国大学生化工设计竞...</a><div class="a11">08-02</div></li>
 </ul>
 <ul class="a10">
 <li class="a12"><a href="#">吕传毅到临淄区调研科技研发平台共建工作</a><div class="a11">07-28</div></li>
 </ul>
 </div>
 </div>
 
 <div class="lbottom">
 <div class="clbtop"><p class="a7">[更多]</p>
 <div class="clbtleft"><p class="a6">媒体报道</p></div>
 <div class="clbtright"></div>
 </div>
 <div class="clbbottom">
 <ul class="a10">
 <li class="a12">[《山东教育》（高教）]<a href="#"> 高质量发展论坛|狠抓改革创新提升治理...</a></li>
 </ul>
 <ul class="a10">
 <li class="a12">[山东教育新闻网]<a href="#"> 院校掠影（封二、封三）丨山东理工大...</a></li>
 </ul>
 <ul class="a10">
 <li class="a12">[大众网]<a href="#"> “豪迈杯”第十五届全国大学生化工设计...</a></li>
 </ul>
 <ul class="a10">
 <li class="a12">[光明网]<a href="#"> 第十五届全国大学生化工设计竞赛华北赛...</a></li>
 </ul>
 </div>
 </div>
</div>

<div class="ccenter">
 
 <div class="ctop">
 <div class="cttop">
 <div class="cttleft"><p class="a6">图说理工&nbsp;&nbsp;&nbsp;&nbsp;视频理工</p></div>
 <div class="cttright"><p class="a7">[更多]</p></div>
 </div>
 <div class="ctbottom">
 <ul class="a10">
 <li class="a13"><a href="#">校园新闻2021年第20期</a></li>
 </ul>
 <ul class="a10">
 <li class="a13"><a href="#">校园新闻2021年第19期</a></li>
 </ul>
 <ul class="a10">
 <li class="a13"><a href="#">校园新闻2021年第18期</a></li>
 </ul>
 <ul class="a10">
 <li class="a13"><a href="#">校园新闻2021年第17期</a></li>
 </ul>
 <ul class="a10">
 <li class="a13"><a href="#">校园新闻2021年第16期</a></li>
 </ul>
 <ul class="a10">
 <li class="a13"><a href="#">校园新闻2021年第15期</a></li>
 </ul>
 <ul class="a10">
 <li class="a13"><a href="#">校园新闻2021年第14期</a></li>
 </ul>
 </div>
 </div>
 
 <div class="cbottom">
 <div class="cbtop">
 <div class="cbtleft"><p class="a6">综合新闻</p></div>
 <div class="cbtright"><p class="a7">[更多]</p></div>
 </div>
 <div class="cbbottom">
 <ul>
 <li class="aa12"><a href="#">我校首获国家自然科学基金重点项目资助</a></li>
 </ul>
 <ul>
 <li class="aa12"><a href="#">我校学子在全国高校大学生测绘类系列竞赛中获佳...</a></li>
 </ul>
 <ul>
 <li class="aa12"><a href="#">Vinci机器人队在第20届全国大学生机器人大赛中...</a></li>
 </ul>
 <ul>
 <li class="aa12"><a href="#">我校学子在第14届全国大学生先进成图大赛中获佳...</a></li>
 </ul>
 <ul>
 <li class="aa12"><a href="#">我校连任山东学校后勤协会高校能源管理分会理事...</a></li>
 </ul>
 <ul>
 <li class="aa12"><a href="#">我校学子创省师范生从业技能大赛历史最好成绩</a></li>
 </ul>
 <ul>
 <li class="aa12"><a href="#">我校与张店融合发展2021年首批科技副总聘任仪式...</a></li>
 </ul>
 <ul>
 <li class="aa12"><a href="#">我校师生在2021年山东省中华经典诵吟大赛中获佳...</a></li>
 </ul>
 </div>
 </div>
</div>

<div class="cright">
 
 <div class="rtop">
 <div class="crttop">
 <div class="crttleft"><p class="a6">学术活动</p></div>
 <div class="crttright"><p class="a7">[更多]</p></div>
 </div>
 <div class="crtbottom">
 <ul>
 <li class="a16">
 <div class="a17">
 <div>
 <div class="a14">2021</div>
 <div class="a15">07-25</div>
 </div>
 </div>
 <div class="a18">
 <p><a href="#" target="_blank" title="代数连通度和谱半径在多智能体系统一致性研究中的应用">代数连通度和谱半径在多智...</a></p>
 <p>主讲:张胜贵教授</p>
 <p>地点:15号教学楼505室</p>
 </div>
 <div class="a19"></div>
 </li>
 </ul>
 <ul>
 <li class="a16">
 <div class="a17">
 <div>
 <div class="a14">2021</div>
 <div class="a15">07-25</div>
 </div>
 </div>
 <div class="a18">
 <p><a href="#" target="_blank" title="如何领悟数学思想">如何领悟数学思想</a></p>
 <p>主讲:杨晗教授</p>
 <p>地点:线上(腾讯会议 ID：583</p>
 </div>
 <div class="a19"></div>
 </li>
 </ul>
 <ul>
 <li class="a16">
 <div class="a17">
 <div>
 <div class="a14">2021</div>
 <div class="a15">07-25</div>
 </div>
 </div>
 <div class="a18">
 <p><a href="#" target="_blank" title="面向人工智能新浪潮的视觉计算与应用">面向人工智能新浪潮的视觉...</a></p>
 <p>主讲:付树军教授</p>
 <p>地点:15号楼505室</p>
 </div>
 <div class="a19"></div>
 </li>
 </ul>
 <ul>
 <li class="a16">
 <div class="a17">
 <div>
 <div class="a14">2021</div>
 <div class="a15">07-25</div>
 </div>
 </div>
 <div class="a18">
 <p><a href="#" target="_blank" title="图论与组合优化">图论与组合优化</a></p>
 <p>主讲:涂建华教授</p>
 <p>地点:15号楼505室</p>
 </div>
 <div class="a19"></div>
 </li>
 </ul>
 </div>
 </div>

 
 <div class="rbottom">
 <div class="crbtop">
 <div class="crbtleft"><p class="a6">专题·公告</p></div>
 <div class="crbtright"><p class="a7">[更多]</p></div>
 </div>
 <div class="crbbottom">
 <ul>
 <li class="a20"><a href="#">诚聘海内外高层次人才启事</a></li>
 </ul>
 <ul>
 <li class="a20"><a href="#">山东理工大学关于事业单位法人证书住所...</a></li>
 </ul>
 <ul>
 <li class="a20"><a href="#">关于对《山东理工大学章程修正案》进行...</a></li>
 </ul>
 <ul>
 <li class="a20"><a href="#">山东理工大学法定代表人变更公告</a></li>
 </ul>
 </div>
 </div>
 </div>
</div>

<div class="bottom">
 <div class="btop">

 <ul class="a26">
 <li class="a21"><a href="#" target="_blank" class="a22"><span class="a23">图书馆</span></a></li>
 <li class="a21"><a href="#" target="_blank" class="a22"><span class="a23">信息公开</span></a></li>
 <li class="a21"><a href="#" target="_blank" class="a22"><span class="a23">招标采购</span></a></li>
 <li class="a21"><a href="#" target="_blank" class="a22"><span class="a23">服务大厅</span></a></li>
 <li class="a21"><a href="#" target="_blank" class="a22"><span class="a23">邮件系统</span></a></li>
 <li class="a21"><a href="#" target="_blank" class="a22"><span class="a23">校园VPN</span></a></li>
 <li class="a21"><a href="#" target="_blank" class="a22"><span class="a23">在线学习</span></a></li>
 <li class="a21"><a href="#" target="_blank" class="a22"><span class="a23">站点导航</span></a></li>
 </ul>

 </div>
 <div class="bbottom">
 <div class="a24" align="center">
 <div class="a25">
 <p>版权所有©山东理工大学地址：山东省淄博市张店区新村西路266号（255000）</p>
 <p>设计维护：网络信息中心<a href="#">鲁ICP备09041544号-6</a></p>
 </div>
 <div class="a27">
 <a href="#" target="_blank"><img src="./sucai/1.png" alt=""></a>&nbsp;&nbsp;
 <a href="#" target="_blank"><img src="./sucai/2.png" alt=""></a>&nbsp;&nbsp;
 <a href="#" target="_blank"><img src="./sucai/3.png" alt=""></a>&nbsp;&nbsp;
 <a href="#" target="_blank"><img src="./sucai/4.png" alt=""></a>&nbsp;&nbsp;
 </div>
 </div>
 </div>
</div>
</div>
</body>
</html></pre>
</div>
<div class="cnblogs_code">
<pre>*{
margin: 0px;
padding: 0px;
}
/*整个网页*/
.all{
width: 100%;
height: 100%;
}
/*头部导航*/
.head{
width: 1010px;
height: 180px;

margin: 0px auto;
}

/*轮播图*/
.lunbo{
width: 100%;
height: 285px;

background-image: url(sucai/lunbo.jpg)
}
/*中间内容*/
.content{
width: 1050px;
height: 625px;

margin: 0px auto;
}
/*底部导航*/
.bottom{
width: 100%;
height: 130px;

}
/*左*/
.cleft{
width: 345px;
height: 623px;
float: left;
margin: 1px;
}
/*中*/
.ccenter{
width: 355px;
height: 623px;
margin: 0px 0px 0px 40px;
float: left;

}
/*右*/
.cright{
width: 304px;
height: 623px;

float: left;
margin: 1px;
}
/*左上*/
.ltop{
width: 343px;
height: 375px;

margin: 1px;
}
/*左下*/
.lbottom{
width: 343px;
height: 245px;

margin: 1px;
}
/*中上*/
.ctop{
width: 353px;
height: 255px;

margin: 1px;
}
/*中下*/
.cbottom{
width: 353px;
height: 365px;

margin: 1px;
}
/*右上*/
.rtop{
width: 302px;
height: 383px;

margin: 1px;
}
/*右下*/
.rbottom{
width: 302px;
height: 237px;

margin: 1px;
}
/*头上*/
.htop{
width: 1008px;
height: 130px;

margin: 1px;
}
/*头下*/
.hbottom{
width:1008px;
height: 50px;

margin: 1px;
border-top: 1px solid #D8D5D5;
}
ul li{
list-style-type: none;
float: left;
margin-left: 10px;
margin-top: 5px;
padding: 0px 15px 0px 10px;
line-height: 52px;
font-size: 14px;
text-align: center;
}
/*头左*/
.hleft{
width: 505px;
height: 130px;

margin: 1px;
float: left;
background-image:url(sucai/xhbj.png)
}
/*头右*/
.hright{
width: 499px;
height: 130px;

margin: 1px;
float: left;
}
/*头右上*/
.hrtop{
width: 500px;
height: 20px;

top: 15px;
right: 1px;
}
.a1{

text-decoration: none;
line-height: 30px;
list-style: none;
cursor: pointer;
float: right;
font-size: 12px;
padding: 0px 10px;
margin:10px;
}
.a3{
display: inline-block;
padding: 0px 5px;
background:url(sucai/xjh.jpg) no-repeat right center;
font-size: 12px;
margin: -7px;
}

.a3:link{
color: #666666;
text-decoration:none;
}
.a3:hover{
color: red;
}
.a3:active{
color: #666666;
}
.a3:visited{
color: #666666;
}
/*头右下*/
.hrbottom{
width: 498px;
height: 66px;

margin: 1px;
float: left;
}
input{
float: right;
width: 150px;
height: 24px;
margin: -1px;
text-shadow: none;
display: inline-block;
}
input{
padding: 1px 2px;
}
input {
appearance: auto;
user-select: none;
white-space: pre;
align-items: flex-start;
text-align: center;
padding: 1px 6px;
}
.a5{
width: 45px;
height: 30px;
background: url(sucai/sousuo.jpg) no-repeat;
border: 0px;
}
table{
float: right;
}
/*中左上上*/
.clttop{
width: 341px;
height: 50px;
height: 45px;
background:url(sucai/hx.jpg) no-repeat 0 bottom;
margin: 1px;
float: left;
}
/*中左上中*/
.cltconter{
width: 341px;
height: 120px;

margin: 1px;
float: left;
}
.a8{
font-size: 15px;
color: #286cc9;
text-align: center;
line-height: 28px;
}
.a9{
color: #666666;
line-height: 20px;
text-indent: 2em;
font-size: 12px;
}
/*中左上下*/
.cltbottom{
width: 341px;
height: 205px;

margin: 1px;

}
.a10{
list-style: none;
margin: 1px;
}
.a11{
float: right;
margin: 0px;
padding: 1px 45px 1px 10px;
font: 12px;
color: #666666;
font-family: "Microsoft YaHei";
}

.a12{
line-height: 30px;
background:url(sucai/xd.jpg) no-repeat left ;
border-bottom: 1px dotted #ddd;

width: 350px;
font-size: 13px;
list-style: none;
margin: 0px;
text-align:left;
padding: 1px 10px 1px 10px;
}
.aa12{
line-height: 30px;
background:url(sucai/xd.jpg) no-repeat left ;
border-bottom: 1px dotted #ddd;

width: 300px;
font-size: 13px;
list-style: none;
margin: 0px;
text-align:left;
padding: 1px 10px 1px 10px;
}
a{
color: #666666;
text-decoration: none;
font-family: "微软雅黑";
}
/*中左上上左*/
.clttleft{
width: 250px;
height: 50px;

margin: 1px;
float: left;
}
.a6{
display: inline-block;
font-family: "微软雅黑";
font-size: 16px;
font-weight: normal;
color: #404040;
margin: 20px 20px 0px 0px;
}
.a7{
color: #de0032;
font-family: "微软雅黑";
float: right;
line-height: 32px;
margin: 15px;
font-size: 12px;
}
/*中左上上右*/
.clttright{
width: 91px;
height: 50px;

margin: 1px;
float:right;
}
/*中左下上*/
.clbtop{
width: 341px;
height: 50px;
height: 45px;
background:url(sucai/hx.jpg) no-repeat 0 bottom;
margin: 1px;
float: left;
}
/*中左下下*/
.clbbottom{
width: 341px;
height: 188px;

margin: 1px;
float:left;
}
/*中左下上左*/
.clbtleft{
width: 250px;
height: 50px;

margin: 1px;
float: left;
}
/*中左下上右*/
.clbtright{
width: 91px;
height: 50px;

margin: 1px;
float:right;
}
.cttop{
width: 355px;
height: 50px;
height: 45px;
background:url(sucai/hx.jpg) no-repeat 0 bottom;
margin: 1px;
float:right;
}
.ctbottom{
width: 355px;
height: 205px;

margin: 1px;
float:right;
}
.a13{
line-height: 27px;
padding-left: -10px;
background:url(sucai/sxj.png) no-repeat left ;
border-bottom: 1px dotted #ddd;
width: 280px;
font-size: 13px;
list-style: none;
margin: 0px;
padding: 1px 10px 1px 40px;
text-align:left;
}
.cttleft{
width: 250px;
height: 50px;

margin: 1px;
float: left;
}
.cttright{
width: 91px;
height: 50px;

margin: 1px;
float:right;
}
.cbtop{
width: 351px;
height: 50px;
height: 45px;
background:url(sucai/hx.jpg) no-repeat 0 bottom;
margin: 0px auto;
float: left;
}
.cbbottom{
width: 341px;
height: 305px;

margin: 0px auto;
float: left;
}
.cbtleft{
width: 250px;
height: 50px;

margin: 0px auto;
float: left;
}
.cbtright{
width: 100px;
height: 50px;

margin: 0px auto;
float:right;
}
.crttop{
width: 302px;
height: 50px;
height: 45px;
background:url(sucai/hx.jpg) no-repeat 0 bottom;
margin: 1px;
float: left;
}
.crtbottom{
width: 302px;
height: 333px;
padding: 10px;
margin: 1px;
float: left;
}
.a14{
height: 24px;
line-height: 24px;
color: #fff;
font-size: 14px;
}
.a15{
height: 26px;
line-height: 26px;
color: #0395e1;
font-size: 12px;
}
.a16{
height: 86px;
border-bottom: 1px dotted #dddddd;
}
.a17{
width: 46px;
height: 50px;
float: left;
background:url(sucai/ddddd.jpg) no-repeat 0 0;
text-align: center;
margin-top: 20px;
}
.a18{
width: 188px;
float: right;
margin-top: 10px;
}
.a19{
width: 100%;
height: 0;
line-height: 0;
font-size: 0;
overflow: hidden;
clear: both;
display: block;
}
.a20{
line-height: 30px;
background:url(sucai/xd.jpg) no-repeat left ;
border-bottom: 1px dotted #ddd;
width: 300px;
font-size: 13px;
list-style: none;
margin: 0px;
text-align:left;
padding: 1px 10px 1px 10px;
color: red;
}
body,p{
line-height: 22px;
color: #000;
font-size: 12px;
}
.crttleft{
width: 202px;
height: 50px;

margin: 0px auto;
float: left;
}
.crttright{
width: 100px;
height: 50px;

margin: 0px auto;
float:right;
}
.crbtop{
width: 302px;
height:50px;
height: 45px;
background:url(sucai/hx.jpg) no-repeat 0 bottom;
margin: 1px;
float: left;
}
.crbbottom{
width: 302px;
height:50px;

margin: 1px;
float: left;
}
.crbtleft{
width: 202px;
height: 50px;

margin: 0px auto;
float: left;
}
.crbtright{
width: 100px;
height: 50px;

margin: 0px auto;
float:right;
}
.btop{
width: 100%;
height: 30px;
border-top: 1px solid #cccccc;
margin: 0 auto;

}
.a21{
display: inline-block;
float: left;
position: relative;
vertical-align: bottom;
font-size: 0px;
margin: 0px;
padding: 1px;
color: #080808;
width: 0 auto;

}
.a22{

text-align: center;
position: relative;
z-index: 100;

background:url(sucai/smalld.jpg) no-repeat right center;
color: #080808 !important;
font-size: 14px;
display: inline-block;
padding: 0px 24px;
line-height: 22px;
cursor: pointer;
}
.a23{
display: inline-block;
padding: 0px 5px;
line-height: 22px;
cursor: pointer;
}
.a24{
background:url(sucai/xb.jpg) no-repeat 0 0;
height: 90px;

width: 1000px;
margin: 0 auto;
font: 12px;
}

.a25{
float: left;
left: 300px;
top: 40px;
width: 450px;
height: 30px;
line-height: 10px;
padding: 10px 300px;
}
.a26{
height: 30px;
width: 1000px;
margin:0 auto;

}
.bbottom{
border-top: 1px solid #cccccc;
background-color: #444444;
margin:10px 0px;
position: relative;
}
p{
font-size: 12px;
line-height: 20px;
color: #9a9a9a;
}
.a27{
position: absolute;
left: 1010px;
top: 28px;
width: 210px;
height: 32px;
font-size: 12px;

}</pre>
</div>
  
来源：https://www.cnblogs.com/jiangliangliang/p/15169900.html

頁: [1]

琼殿技术论坛's Archiver

CSS基本标签学习8.20