百度前端技术学院第二题

最新推荐文章于 2021-06-21 13:00:02 发布

sinat_36136789

最新推荐文章于 2021-06-21 13:00:02 发布

阅读量2k

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/sinat_36136789/article/details/52874563

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>题目二</title>
    <link rel="stylesheet" type="text/css" href="22.css">
</head>
<body>

    <header>
       <h1><a href="#"><img src="bd_logo.png" width="100px" height="80px" id="logo"></a></h1>
       <nav>
	        <ul>
		       <li><a href="http://ife.baidu.com/task/detail?taskId=2">导航链接4</a></li>
		       <li><a href="http://ife.baidu.com/task/detail?taskId=2">导航链接3</a></li>
		       <li><a href="http://ife.baidu.com/task/detail?taskId=2">导航链接2</a></li>
		       <li><a href="http://ife.baidu.com/task/detail?taskId=2">导航链接1</a></li>
		    </ul>
	    </nav>
    </header>



<main>
<article>
    <h1>文章一级标题</h1>
    <h2>文章二级标题</h2>
    <span>文章作者 文章发表时间</span>
    <p>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，换行了<br>
    这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，<a href="http://ife.baidu.com/task/detail?taskId=1">这是一个链接到http://ife.baidu.com</a>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，<strong>这里有一个粗体字</strong>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落。<br>
    <img src="test1.jpeg" title="图片1" title="图片1" width="800px" height="500px"></p>

    <p>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，换行了<br>
    ，这是一个很长的段落，，这是一个很长的段落， <a href="http://ife.baidu.com/task/detail?taskId=1">这是一个链接到http://ife.baidu.com</a>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，<strong>这里有一个粗体字</strong>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落。<br>
    </p>
</article>
<article>
    <h1>文章一级标题</h1>
    <h2>文章二级标题</h2>
    <span>文章作者</span> <span>文章发表时间</span>
    <p>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落， 这是一个很长的段落，这是一个很长的段落，换行了<br>
    这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，<a href="http://ife.baidu.com/task/detail?taskId=1">这是一个链接到http://ife.baidu.com</a>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，<strong>这里有一个粗体字</strong>这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落，这是一个很长的段落。<br>
    <img src="test1.jpeg" title="图片1" title="图片1" width="800px" height="500px"></p>
    <ul>
        <li>列表项目一</li>
	    <li>列表项目二</li>
	    <li>列表项目三</li>
	</ul>
</article>
<article>
    <h1>图片</h1>
	<dl>
		<dd>好看的图片<br>
		<img src="C:\Users\H\Desktop\ww\test1.jpeg" title="好看的图片" width="800px" height="500px"><br>
		</dd>
		<dd>好看的图片 <br>
		<img src="C:\Users\H\Desktop\ww\test1.jpeg" title="好看的图片" width="800px" height="500px"><br>
		</dd>
		<dd>好看的图片 <br>
		<img src="C:\Users\H\Desktop\ww\test1.jpeg" title="好看的图片" width="800px" height="500px"><br>
		</dd>
		<dd>好看的图片<br>
		<img src="C:\Users\H\Desktop\ww\test1.jpeg" title="好看的图片" width="800px" height="500px"><br>
		</dd>
	</dl>
	</article>
<article>
    <h1>最后一篇文章一级标题</h1>
    <h2>文章二级标题</h2>
    <p>文章作者 文章发表时间<br></p>
    <ol>
    <li>排名1</li>
	<li>排名2</li>
	<li>排名3</li>
	</ol>
    <table border="1" cellpadding="0" cellspacing="0">
	  <tbody>
		<tr>
			<th class="gridtop" >表头</th>
			<th class="gridtop" >表头</th>
			<th class="gridtop">表头</th>
		</tr>
		<tr>
		<td>表内容单元格</td>
		<td>表内容单元格</td>
		<td><a href="#">操作</a></td>
		</tr>
		<tr>
		<td>表内容单元格</td>
		<td>表内容单元格</td>
		<td><a href="#">操作</a></td>
		</tr>
		<tr>
		<td>表内容单元格</td>
		<td>表内容单元格</td>
		<td><a href="#">操作</a></td>
		</tr>
		<tr>
		<td>表内容单元格</td>
		<td>表内容单元格</td>
		<td><a href="#">操作</a></td>
		</tr>
		<tr>
		<td class="gridbottom">总计</td>
		<td colspan="2" class="gridbottom">1000</td>
		</tr>
	  </tbody>
    </table>
</article>
</main>

<aside>
    <h2>这里以后是一个侧栏，这是侧栏的标题</h2>
    <span>请输入邮箱地址：</span><input type="text" name="email"><br>
    <span class="second">邮箱地址请按要求输入</span><br>
    <span>请输入密码：</span><input type="password" name="password1"><br>
    <span>请重复输入密码：</span><input type="password" name="password2"><br>
    <span class="second">密码请为6-16位英文数字</span><br>
    <span>性别：</span>
    <input type="radio" name="性别" value="男" />男
    <input type="radio" name="性别" value="女" />女<br>
    <span>地点：</span>
    <select>
	     <option value="beijing">北京</option>
	     <option value="shanghai">上海</option>
    </select><br>
    <span>爱好：</span>
    <input type="checkbox" name="爱好" value="运动"  />运动
    <input type="checkbox" name="爱好" value="艺术" />艺术
    <input type="checkbox" name="爱好" value="科学"  />科学
    <br>
    <span class="text">个人描述：</span>
    <textarea rows="4" cols="100" class="texta">这是您的一个多行输入框
    </textarea><br>
    <input type="submit" name="确定" id="assum">
</aside>
<footer>版权所有@</footer>
</body>
</html>

CSS:

* {
	margin: 0;
	padding: 0;
}
body{
	background: gray;
}
/*导航窗口样式*/
header,footer{
	height: 60px;
	background: #333;
}
footer{
	color: white;
	text-align: center;
}
nav li{
	list-style: none;/*去掉表格前边的黑点*/
	float: right;
	font-family: "微软雅黑";
	padding: 20px 10px;
}
nav li>a{
	text-decoration:none;/*去掉链接下划线*/
}
nav li:hover{
	background: orange;
}
#logo{
	display: block;
	margin-left: 40px;
	height: 60px;
	float: left;
}
/*正文窗口样式*/
article,aside{
	background: white;
	margin: 20px 2%;/*设置正文整体布局*/
	padding: 30px;
}
article p{
	text-indent: 2em;
	line-height: 1.5em;
}
h1,h2,h3,h4{
    line-height: 2em;
}
article ul{
	padding-left: 20px;
}
article span{
	line-height: 3em;
}
article ul>li{
	list-style: none;
}
article dl>dd>img{
	width: 120px;
	height: 120px;
}
article dl>dd{
	text-align: center;
	border: 1px solid;
    width: 120px;
    padding:10px;
    margin: 20px;
}
ol li{
	margin: 15px 15px 15px 100px;
}
.gridtop{
	background:#333;
	color: white; 
	text-align: left;
	}
.gridbottom{
	background: #666666;
	font-family: "楷体";
}
table{
	margin:0px 10px 10px 10px;
	width: 100%;
}

/*底部窗口样式*/
aside span{
	display: inline-block;
	width: 150px;
	text-align: right;
    padding-left: 300px;
    padding-top: 20px;
}
#assum{
	height: 40px;
	color:white;
	background:  #2200AA ;
	display: block;
	font-family: "微软雅黑";
	width: 100%;
}
.second{
	display: inline-block;
	text-align: left;
	padding-left:450px; 
	width: 200px;
	font-size:6px;
	color: #AAAAAA;
}
.text{
	display: block;
	float: left;
	text-align: right; 
}
.texta{
      display: block;
      margin-top: 20px;
}