今天没有学什么新内容,就做了做作业,仿照做了一个百度首页,由于太菜,做了挺长时间,基本上和百度首页有一点相似了,不过还是有所不同,毕竟有的代码还没学,而且第一次写这种东西,废话不多说了,把代码放上来,大佬们轻喷,谢谢。
作业要求效果图:
HTML代码块:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 外部引入的方式 -->
<link rel="stylesheet" type="text/css" href="css/baidu.css"/>
</head>
<body>
<!--
1.先写网页的结构, 每一块区域单独的色块。
2.调整色块与色块的间距。
3.完善每一块的内容。
-->
<!-- 上 -->
<div class="top">
<a href="">新闻</a>
<a href="">好123</a>
<a href="">地图</a>
<a href="">视频</a>
<a href="">贴吧</a>
<a href="">学术</a>
<a href="" class="top_a">登录</a>
<a href="" class="top_a">设置</a>
<a href="" id="more">更多产品</a>
</div>
<!-- 中 -->
<div class="middle">
<img src="img/bd_logo1.png" >
<!-- 输入框和按钮 -->
<div class="input">
<!-- 输入框 --><!-- 按钮 -->
<input type="text" class="input_text"><input type="button" value="百度一下" class="input_btn">
</div>
</div>
<!-- 下 -->
<div class="bottom">
<img src="img/code.png" >
<p class="download">下载百度APP</p>
<p class="look">有事搜一搜 没事看一看</p>
<div class="about">
<a href="">把百度设为主页</a>
<a href="">关于百度</a>
<a href="">About Baidu</a>
<a href="">百度推广</a>
<span>(京)-经营性-2017-0020</span>
</div>
<div class="copyright">
<span>©2020 Baidu </span>
<a href="">使用百度前必读</a>
<a href="">意见反馈</a>
<span>京ICP证030173号</span>
<img src="img/1.png" >
<a href="" id="record">京公网安备11000002000001号</a>
<img src="img/2.png" >
</div>
</div>
</body>
</html>
css样式代码块:
* {
margin: 0;
padding: 0;
}
.top {
/* 内容右对齐 */
text-align: right;
/* 上填充 */
padding-top: 19px;
/* 右填充 */
padding-right: 11px;
}
/* 子代选择器 class选择器+元素选择器 */
.top>a {
/* 文字相关 */
color: #333333;
font-size: 13px;
line-height: 24px;
/* 文字粗细 */
font-weight: 700;
/* 文字字体 */
font-family: arial;
/* 左间距 */
margin-left: 20px;
}
/* class选择器+class选择器 */
.top>.top_a {
/* 修改文字粗细 */
font-weight: 400;
}
#more {
/* 宽高 */
width: 60px;
height: 24px;
/*
a标签是一个行属性标签, 行属性标签是无法更改宽高的,宽高由内容撑开.
如果想让a标签能够设置宽高,比如给a标签添加一个属性display:inline-block;
*/
display: inline-block;
background-color: #3388ff;
/* 去掉下划线 */
text-decoration: none;
color: white;
font-weight: 400;
/* 水平居中 */
text-align: center;
/* 右间距 */
/* margin-right: 11px; */
}
.middle {
/* 上间距 */
margin-top: 138px;
/* 内容居中 */
text-align: center;
}
.middle>img {
width: 270px;
}
.input {
/* 上间距 */
margin-top: 25px;
}
/* 输入框 */
.input_text {
width: 532px;
height: 34px;
border: 1px solid #b6b6b6;
/* 去掉右边框 - 将右边框宽度设置为0 */
/* border-right-width: 0; */
border-right: none;
/* 左填充 */
padding-left: 7px;
/*
盒模型的宽度: 539 + 1 + 1 + 7 = 548px
第一个:多在width. -7 541px
第二个:多个右边框. -1 540px
*/
}
/* 按钮 */
.input_btn {
width: 100px;
height: 36px;
background-color: #3385ff;
color: white;
border: 1px solid #3385ff;
/* 垂直对齐方式 */
vertical-align: top;
}
.bottom {
/* 上间距 */
margin-top: 256px;
/* 内容居中 */
text-align: center;
}
.bottom>img {
border: 1px solid #f3f3f3;
padding: 5px;
}
.download {
/* 文本相关 */
color: #333333;
font-size: 16px;
line-height: 32px;
/* 字母间距 */
letter-spacing: 3px;
/* 字体 */
font-family: arial;
}
.look {
color: #999;
font-size: 14px;
line-height: 14px;
font-weight: 300;
}
.about {
/* 文本相关的属性 */
color: #999;
font-size: 12px;
line-height: 22px;
font-family: arial;
/* 上间距 */
margin-top: 25px;
}
/*
a元素对文字有自己的颜色设置,所以如果想要修改a元素中文字的颜色,就必须作用到a标签身上(必须得直接对a元素做修改).
*/
.about>a {
color: #999;
/* 右间距 */
margin-right: 25px;
}
.copyright {
color: #999;
font-size: 12px;
font-family: arial;
line-height: 24px;
}
.copyright>a {
color: #999;
}
.copyright>img {
/* 修改图片的垂直对齐方式 -- 垂直居中对齐 top顶部 middle居中 bottom底部 baseline基线*/
vertical-align: middle;
}
#record {
/* 左间距 */
margin-left: 15px;
}
我做出来的成品图:
还算是可以吧,如果哪位朋友觉得哪需要优化,可以告诉我,一起讨论一下,共同进步,谢谢。
还有第二个作业,比较简单,是表格的练习。
先放成品图:
我的代码块:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>报考学校</title>
<style type="text/css">
.lo{
background-color: gainsboro;
}
.one {
width: 130px;
}
.two{
width: 180px;
}
.three{
width: 145px;
}
.four{
width: 40px;
}
.five{
width: 80px;
}
.six{
width: 80px;
}
td {
text-align: center;
height: 28px;
font-size: 12px;
}
.r {
color: #FF0000;
}
#t {
text-indent: 9em;
}
</style>
</head>
<body>
<table border="1px" cellspacing="0px" >
<!-- 1 -->
<tr>
<td class="lo one">专业类别</td>
<td class="lo two">专业名称</td>
<td class="lo three">报考热度排名</td>
<td class="lo four">层次</td>
<td class="lo five">就业前景</td>
<td class="lo six">开设院校</td>
</tr>
<!-- 2 -->
<tr>
<td rowspan="4">哲学类</td>
<td>哲学</td>
<td>全国25 哲学1</td>
<td>本科</td>
<td class="r">点击查看</td>
<td>点击查看</td>
</tr>
<!-- 3 -->
<tr>
<!-- <td></td> -->
<td>逻辑学</td>
<td>全国56 哲学2</td>
<td>本科</td>
<td class="r">点击查看</td>
<td>点击查看</td>
</tr>
<!-- 4 -->
<tr>
<!-- <td></td> -->
<td>宗教学</td>
<td>全国708 哲学4</td>
<td>本科</td>
<td class="r">点击查看</td>
<td>点击查看</td>
</tr>
<!-- 5 -->
<tr>
<!-- <td></td> -->
<td>伦理学</td>
<td>全国678 哲学3</td>
<td>本科</td>
<td class="r">点击查看</td>
<td>点击查看</td>
</tr>
<!-- 6 -->
<tr>
<td rowspan="6">经济学类</td>
<td>经济学</td>
<td>全国732 经济学12</td>
<td>本科</td>
<td class="r">点击查看</td>
<td>点击查看</td>
</tr>
<!-- 7 -->
<tr>
<!-- <td></td> -->
<td>经济统计学</td>
<td>全国966 经济学15</td>
<td>本科</td>
<td class="r">点击查看</td>
<td>点击查看</td>
</tr>
<!-- 8 -->
<tr>
<!-- <td></td> -->
<td>国民经济管理</td>
<td>全国49 经济学5</td>
<td>本科</td>
<td class="r">点击查看</td>
<td>点击查看</td>
</tr>
<!-- 9 -->
<tr>
<!-- <td></td> -->
<td>资源与环境经济学</td>
<td>全国36 经济学4</td>
<td>本科</td>
<td class="r">点击查看</td>
<td>点击查看</td>
</tr>
<!-- 10 -->
<tr>
<!-- <td></td> -->
<td>商务经济学</td>
<td>全国2 经济学1</td>
<td>本科</td>
<td class="r">点击查看</td>
<td>点击查看</td>
</tr>
<!-- 11 -->
<tr>
<!-- <td></td> -->
<td>能源经济</td>
<td>全国73 经济学8</td>
<td>本科</td>
<td class="r">点击查看</td>
<td>点击查看</td>
</tr>
<!-- 12 -->
<tr>
<td rowspan="2">财政学类</td>
<td>财政学</td>
<td>全国16 经济学2</td>
<td>本科</td>
<td class="r">点击查看</td>
<td>点击查看</td>
</tr>
<!-- 13 -->
<tr>
<td>税收学</td>
<td>全国1020 经济学16</td>
<td>本科</td>
<td class="r">点击查看</td>
<td>点击查看</td>
</tr>
<!-- 14 -->
<tr>
<td rowspan="8">金融学类</td>
<td>金融学</td>
<td>全国801 经济学13</td>
<td>本科</td>
<td class="r">点击查看</td>
<td>点击查看</td>
</tr>
<!-- 15 -->
<tr>
<!-- <td></td> -->
<td>金融工程</td>
<td>全国24 经济学3</td>
<td>本科</td>
<td class="r">点击查看</td>
<td>点击查看</td>
</tr>
<!-- 16 -->
<tr>
<!-- <td></td> -->
<td>保险学</td>
<td>全国1090 经济学17</td>
<td>本科</td>
<td class="r">点击查看</td>
<td>点击查看</td>
</tr>
<!-- 17 -->
<tr>
<!-- <td></td> -->
<td>投资学</td>
<td>全国661 经济学9</td>
<td>本科</td>
<td class="r">点击查看</td>
<td>点击查看</td>
</tr>
<!-- 18 -->
<tr>
<!-- <td></td> -->
<td>金融数学</td>
<td>全国63 经济学7</td>
<td>本科</td>
<td class="r">点击查看</td>
<td>点击查看</td>
</tr>
<!-- 19 -->
<tr>
<!-- <td></td> -->
<td>信用管理</td>
<td>全国685 经济学11</td>
<td>本科</td>
<td class="r">点击查看</td>
<td>点击查看</td>
</tr>
<!-- 20 -->
<tr>
<!-- <td></td> -->
<td>经济与金融</td>
<td>全国60 经济学6</td>
<td>本科</td>
<td class="r">点击查看</td>
<td>点击查看</td>
</tr>
<!-- 21 -->
<tr>
<!-- <td></td> -->
<td>精算学</td>
<td>全国1177 经济学18</td>
<td>本科</td>
<td class="r">点击查看</td>
<td>点击查看</td>
</tr>
</table>
<p id="t"><img src="img/QQ截图20200214221438.png" ></p>
</body>
</html>