百度前端学院_任务二零基础HTML及CSS编码
来源：互联网 发布：蓝光原盘播放软件 编辑：程序博客网 时间：2024/05/29 11:23
HTML CSS基础练习...留一下源代码。 欢迎各路大神提意见..
<!DOCTYPE html>
<html><head>
<meta charset="utf-8" />
<title>百度前端学院_任务二零基础HTML及CSS编码</title>
<style type="text/css">
body {
background-color: honeydew;
}
p {
text-indent: 30px;
}
ul {
list-style: none;
}
textarea {
width: 700px;
height: 80px;
}
#_header {
background-color: black;
}
#_header img {
height: 80px;
padding-left: 30px;
}
#_header ul {
color: white;
float: right;
}
#_header ul li {
float: left;
padding: 20px;
}
._para {
padding: 15px;
}
._paraone {
background-color: white;
padding: 30px;
}
._para2 {
font-size: 18px;
color: darkgray;
font-weight: normal;
}
._author {
font-size: 14px;
color: darkgray;
font-weight: normal;
}
._pics {
width: 300px;
height: 300px;
text-align: center;
border: 1px solid;
margin: 10px;
margin-left: 40px;
}
._pics img {
width: 300px;
height: 200px;
}
#_tab table {
width: 100%;
border: 1px solid;
border-collapse: collapse;
}
#_tab table th {
text-align: left;
border: 1px solid;
border-collapse: collapse;
color: #FFFFFF;
background-color: #000000;
}
#_tab table tr {
border: 1px solid;
border-collapse: collapse;
}
#_tab table td {
border: 1px solid;
border-collapse: collapse;
}
._taball {
background-color: gainsboro;
}
._tableft {
text-align: right;
}
#subBtn {
width: 100%;
height: 25px;
color: white;
background-color: cornflowerblue;
}
#_footer{
color: white;
height: 30px;
text-align: center;
background-color: #000000;
}
</style>
</head>
<body>
<div id="_header">
<img src="img/baidu.png" />
<ul>
<li>导航链接一</li>
<li>导航链接二</li>
<li>导航链接三</li>
<li>导航链接四</li>
</ul>
</div>
<div class="_para">
<div class="_paraone">
<h2>文章一级标题</h2>
<h2 class="_para2">文章二级标题</h2>
<h2 class="_author">文章作者 文章发表时间</h2>
<p class="_pindent">这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落,换行了<br/> 这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落,这是一个很长很长的段落，这是一个很长很长的段落,换行了
<br/> 这是一个很长很长的段落，这是一个很长很长的段落，
<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>,这是一个很长很长的段落,这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落,这是一个很长很长的段落，这是一个很长很长的段落,这是一个很长很长的段落，这是一个很长很长的段落,这是一个很长很长的段落，这是一个很长很长的段落</p>
<br/><img src="img/test.jpg" width="500px" height="300px" />
<br/>
<p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落,换行了<br/> 这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落,这是一个很长很长的段落，这是一个很长很长的段落,
<a href="http://ife.baidu.com" target="_blank">这里有一个链接点击后打开新窗口链接到http://ife.baidu.com</a>,这是一个很长很长的段落这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落,这是一个很长很长的段落，这是一个很长很长的段落,这是一个很长很长的段落，这是一个很长很长的段落,这是一个很长很长的段落，这是一个很长很长的段落,这是一个很长很长的段落，这是一个很长很长的段落,这是一个很长很长的段落，这是一个很长很长的段落</p>
</div>
</div>
<div class="_para">
<div class="_paraone">
<h2>另一篇文章一级标题</h2>
<h2 class="_para2">文章二级标题</h2>
<p class="_pindent">这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落,换行了<br/> 这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落,这是一个很长很长的段落，这是一个很长很长的段落,换行了
<br/> 这是一个很长很长的段落，这是一个很长很长的段落，
<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>,这是一个很长很长的段落,这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落,这是一个很长很长的段落，这是一个很长很长的段落,这是一个很长很长的段落，这是一个很长很长的段落,这是一个很长很长的段落，这是一个很长很长的段落</p>
<br/><img src="img/test.jpg" width="500px" height="300px" />
<ul>
<li>列表项目一</li>
<li>列表项目二</li>
<li>列表项目三</li>
</ul>
</div>
</div>
<div class="_para">
<div class="_paraone">
<h2>图片</h2>
<div class="_pics">
<p>好看的图片</p>
<img src="img/test.jpg" />
</div>
<div class="_pics">
<p>好看的图片</p>
<img src="img/test.jpg" />
</div>
<div class="_pics">
<p>好看的图片</p>
<img src="img/test.jpg" />
</div>
<div class="_pics">
<p>好看的图片</p>
<img src="img/test.jpg" />
</div>
<div class="_pics">
<p>好看的图片</p>
<img src="img/test.jpg" />
</div>
<div class="_pics">
<p>好看的图片</p>
<img src="img/test.jpg" />
</div>
<div class="_pics">
<p>好看的图片</p>
<img src="img/test.jpg" />
</div>
<div class="_pics">
<p>好看的图片</p>
<img src="img/test.jpg" />
</div>
<div class="_pics">
<p>好看的图片</p>
<img src="img/test.jpg" />
</div>
<div class="_pics">
<p>好看的图片</p>
<img src="img/test.jpg" />
</div>
</div>
</div>
<div class="_para" id="_tab">
<div class="_paraone">
<h2>最后一篇文章一级标题</h2>
<h2 class="_para2">文章二级标题</h2>
<p class="_author">文章作者 文章发表时间</p>
<ol>
<li>排名1</li>
<li>排名2</li>
<li>排名3</li>
</ol>
<p>下面是一个表格</p>
<table>
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</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 class="_taball">
<td>总计</td>
<td colspan="2">1000</td>
</tr>
</table>
</div>
</div>
<div class="_para">
<div class="_paraone">
<h2>这里以后是一个侧栏，这是侧栏的标题</h2>
<div align="center">
<form>
<table>
<tr>
<td class="_tableft">请输入邮箱地址</td>
<td><input value="这是一个文本输入框" /></td>
</tr>
<tr>
<td class="_tableft"></td>
<td>
<p class="_author">邮箱地址请按要求格式输入</p>
</td>
</tr>
<tr>
<td class="_tableft"><span>请输入密码</span></td>
<td><input value="这是一个文本输入框" /></td>
</tr>
<tr>
<td class="_tableft"><span>请重复输入密码</span></td>
<td><input value="这是一个文本输入框" /></td>
</tr>
<tr>
<td class="_tableft"></td>
<td>
<p class="_author">密码为6-16位英文数字</p>
</td>
</tr>
<tr>
<td class="_tableft"><span>性别：</span></td>
<td><label><input type="radio"/>男</label>
<label><input type="radio"/>女</label></td>
</tr>
<tr>
<td class="_tableft"><span>城市：</span></td>
<td>
<select>
<option>北京</option>
<option>上海</option>
</select>
</td>
</tr>
<tr>
<td class="_tableft">爱好</td>
<td><label><input type="checkbox" />运动</label>
<label><input type="checkbox" />艺术</label>
<label><input type="checkbox" />科学</label></td>
</tr>
<tr>
<td class="_tableft">个人描述</td>
<td><textarea>这是一个多行输入框，输入您的个人描述</textarea></td>
</tr>
</table>
<button type="submit" id="subBtn">确认提交</button>
</form>
</div>
</div>
</div>
<div id="_footer">
<p>版权所有©</p>
</div>
</body>
</html>
阅读全文
0 0
- 百度前端学院_任务二零基础HTML及CSS编码
- task002--任务二：零基础HTML及CSS编码
- 任务二：零基础HTML及CSS编码（一）
- 任务五：零基础HTML及CSS编码（二）
- 《百度前端技术学院》任务一：零基础HTML编码
- HTML5编程（任务二 零基础HTML及CSS编码）（20160909-0040）
- HTML5编程（任务五 零基础HTML及CSS编码（二））（20160912-0043）
- 【ife】任务二：零基础HTML及CSS编码（一）
- 【ife】任务五：零基础HTML及CSS编码（二）
- 百度前端学院任务笔记（二）
- 百度前端学院任务练习—二
- 百度前端学院-小薇学院-任务二
- 小薇学院任务一：零基础HTML编码（笔记）
- 零基础HTML与CSS编码（二）
- 零基础HTML及CSS编码练习（一）
- 任务一：零基础HTML编码
- 零基础学前端HTML+CSS
- 零基础学前端HTML+CSS
- 为什么你的共享内存key为0且无法删除？
- 《Hadoop生态》——第二章 数据库与数据管理——Blur
- duplicate files copied in apk
- CSR8670蓝牙模块BQB认证经验总结
- JS原型对象和原型链
- 百度前端学院_任务二零基础HTML及CSS编码
- 2017.07.08【NOIP提高组】模拟赛B组
- Efficient Diffusion on Region Manifolds Recovering Small Objects with Compact CNN Representations
- 关于layui的分页插件的使用
- windows下Mysql5.7.18修改初始密码
- python键盘输入五个数字，判断是否是回文数
- 【bzoj1905】捉迷藏(线段树)
- java 8——Lambda表达式
- 十二、JVM如何利用工具来监控调优前后的性能变化。
