html and css-task1

最新推荐文章于 2021-06-30 01:29:28 发布

hai_rou

最新推荐文章于 2021-06-30 01:29:28 发布

阅读量241

点赞数

分类专栏： web前端学习文章标签： web前端 html css

本文链接：https://blog.csdn.net/hai_rou/article/details/51335515

版权

web前端学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

学习方式：自主学习

学习导引：百度前端技术学院

学习目标：零基础HTML及CSS编码

学习收获：<nav>HTML5新标签，将具有导航性质的标签放在一块，使代码结构在语义化方面更加准确，同时对于屏幕阅读器等设备的支持也更好。

<section>HTML5新标签，定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

<article>标签定义外部的内容,外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。

页面效果:

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>任务二</title>
<style type="text/css">
body{
	background: #ccc;
	font-family: "微软雅黑"；
	}
.nav-header nav{
	background-color:#333;
}
.nav-header nav .nav-logo{
	display:inline-block;
}
.nav-header nav .nav-logo img{
	margin-left:20px;
	height:50px;
}
.nav-header nav .nav-list{
	float:right;
}
.nav-header nav .nav-list ul{
	margin-top:15px;
}
.nav-header nav .nav-list ul li{
	font-size:14px;
	float:left;
	margin-right:25px;
}
.nav-header nav .nav-list ul li a{
	text-decoration:none;
	color:#ffffff;
}
.nav-header nav .nav-list ul li.active{
	color:#cccccc;
}
.nav-header nav .nav-list ul li:hover a;
.nav-header nav .nav-list ul li.active a{
	color:#cccccc;
}
p{
	text-indent:2em;
}
article,aside{
	margin:20px;
	background-color:#fff;
	padding:30px 20px;
}
article header h1,aside header h1{
	font-size:2em;
	margin-bottom:10px;//相对于h1盒子
}
article header h2,aside header h2{
	color:#888;
	margin-bottom:10px;
}
article header h6,aside header h6{
	color:#999;
	margin-right:8px;
	margin-bottom:8px;
}
article figure,aside figure{
	width:216px;
	border:1px solid #aaa;
	text-align:center;//对齐方式
    padding:10px;
	margin:20px;
}
article figure figcaption,aside figure figcaption { 
  margin-bottom: 10px; 
   } 
article section div img,aside section div img{
	margin:10px 0 10px 0;
}
article section ul li,aside section ui li{
	text-indent:2em;
	margin-bottom:5px;//ul是块状元素
}
article ol li,aside ol li{
	margin-left:2em;
	margin-bottom:5px;
}
table{
	border:1px solid #ccc;
	width:80%;
	text-align:left;
}
table thead{
	background-color:#333;
	color:white;
}
table td{
	border:1px solid #ccc;
}
table td,table th{
	background-color:#ccc;
}
table tfoot{
	background-color:#ccc;
}
aside header{
	border-left:3px solid #ccc;
	padding:1px 0 1px 10px;
	margin-bottom:10px;
}
aside form div{
	margin-top:5px;
	margin-bottom:10px;
	text-align:center;
}
aside form .placeholder{
	color:#aaa;
	font-size:14px;
}
aside form input[type="text"],aside form input[type="password"],
aside form textarea{
	padding:3px;
}
aside form input[type="submit"]{
	width:100%;
	padding:10px 0 10px 0;
	border:1px solid blue;
	border-radius:5px;
	background-color:blue;
	color:#fff;
}
aside form textarea{
	width:80%;
}
footer{
	text-align:center;
}
</style>
</head>
<body>
<header class="nav-header">
<nav>
<div class="nav-logo">
     <img src="file:///C|/Users/DELL2015/Desktop/logo_top.png" />
     </div>
<div class="nav-list">
<ul>
<li><a href="#">导航链接一</a></li>
<li><a href="#">导航链接二</a></li>
<li><a href="#">导航链接三</a></li>
<li class="active"><a href="">导航链接四</a></li>
</ul>
</div>
</nav>
</header>
<article>
<header>
<hgroup>
<h1>文章一级标题</h1>
<h2>文章二级标题</h2>
<h6>文章作者 文章发表时间</h6>
</hgroup>
</header>
<section>
<p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落</p>
<p>换行了</p>
<p>这是一个很长很长的段落，这是一个很长很长的段落，换行了</p>
<p>这是一个很长很长的段落，这是一个很长很长的段落，<a href="#">这里有一个链接</a>这是一个很长很长的段落，<strong>这里有个粗体字</strong>这是一个很长很长的段落，这是一个很长很长的段落</p>
<div>
<img src="file:///C|/Users/DELL2015/Desktop/捕获.PNG" />
</div>
<p>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,换行了</p>
<p>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这里有个粗体字这是一个很长很长的段落,这是一个很长很长的段落,<a href="http://ife.baidu.com" title="百度">这里有一个链接点击后打开新窗口链接到http://ife.baidu.com</a>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落。</p>
</section>
</article><!--第一栏-->

<article>
<header>
<hgroup>
<h1>另一篇文章一级标题</h1>
<h2>文章二级标题</h2>
<h6>文章作者 文章发表时间</h6>
</hgroup>
</header>
<section>
<img src="file:///C|/Users/DELL2015/Desktop/捕获.PNG" />
<ul>
<li>项目列表一</li>
<li>项目列表二</li>
<li>项目列表三</li>
</ul>
</section>
</article><!--第二栏-->

<article>
<header>
<hgroup>
<h1>图片</h1>
</hgroup>
</header>
<div>
<figure>
<figcaption>好看的图片</figcaption>
<img src="file:///C|/Users/DELL2015/Desktop/捕获.PNG" />
</figure>
<figure>
<figcaption>好看的图片</figcaption>
<img src="file:///C|/Users/DELL2015/Desktop/捕获.PNG" />
</figure>
</div>
</article><!--第三栏-->

<article>
<header>
<hgroup>
<h1>最后一篇文章一级标题</h1>
<h2>文章二级标题</h2>
</hgroup>
</header>
<ol>
<li>排名1</li>
<li>排名2</li>
</ol>
<p>这是一个表格</p>
<table border="1">
<thead>
<tr>
<td>表头</td>
<td>表头</td>
<td>表头</td>
</tr>
</thead>
<tbody>
<tr>
<td>表内容单元格</td> 
<td>表内容单元格</td> 
<td><a href="http://ife.baidu.com">操作</a></td> 
</tr>
<tr>
<td>表内单元格</td>
<td>表内单元格</td>
<td><a href="http://ife.baidu.com">操作</a></td> 
</tr>
</tbody>
<tfoot>
<tr>
<td>总计</td>
<td colspan="2">1000</td>
<!--两个表格合并为一个-->
</tr>
</tfoot>
</table>
</article><!--第四栏-->

<aside>
<header>
<hgroup>
<h1>这是一个侧标题栏</h1>
</hgroup>
</header>
<form  action=""> 
<div>
<label>请输入邮箱地址：</label>
<input type="text" value="这是一个文本输入框"> 
<div class="placeholder">邮箱地址请按要求格式输入</div>
</div>
<div> 
<label>请输入密码：</label>
<input type="password" value="这是一个文本输入框"> 
</div>
<div>
<label>请重复输入密码：</label>
<input type="password" value="这是一个文本输入框"> 
<div class="placeholder">密码请为6-16位英文数字</div>
</div>
<div> 
<label>性别:</label>
<input type="radio" checked="checked" name="sex">男</input>
<input type="radio" name="sex">女</input>
<!--radio,name一致时为单选框-->
</div>
<div>
<label>城市</label>
<select>
<option>北京</option>
<option>上海</option>
</select>
</div>
<div>
<label>爱好</label>
<input type="checkbox">篮球</input>
<input type="checkbox">画画</input>
<input type="checkbox">弹琴</input>
<!--checkbox为复选框-->
</div>
<div>
<label>个人描述</label>
<textarea rows="5" cols="85">这是一个多行文本框</textarea>
</div>
<input type="submit" value="确认提交" />
</form>
</aside><!--第四栏-->
<footer>
<span>版权归@咸肉鸡君所属</span>
</footer>
</body>
</html>

ps：初学小白，欢迎各路大神指导。

hai_rou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html and css-task1

学习方式：自主学习学习导引：百度前端技术学院学习目标：零基础HTML及CSS编码学习收获：HTML5新标签，将具有导航性质的标签放在一块，使代码结构在语义化方面更加准确，同时对于屏幕阅读器等设备的支持也更好。 HTML5新标签，定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。标
复制链接

扫一扫