web开发项目考核

Miracle
1248
文章
68
评论
2017年3月29日14:29:03 评论 5258字阅读17分31秒
网页传送门

源代码如下:

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>Web开发项目考核</title>
<style type="text/css">
/*整体内外边距0,字体颜色、大小,背景色*/
body {
margin: 0;
padding: 0;
color: darkgray;
background-color: lightblue;
}
/*头部区背景,内边距*/
header {
background-color: gray;
padding:20px;
}
/*logo大小*/
.logo {
}
/*导航区居右*/
nav {
float:right
}
/*导航列表项:浮动横排,间距*/
.links li {
float:left;
margin: 10px;
padding: 1px;
}
/*导航颜色及变换,去下划线*/
.links a {
text-decoration: none;
color: lawngreen;
}
/*内容区外边距*/
article {
margin: 25px;
}
/*内容区块内外边距、背景、阴影*/
section {
margin: 10px;
padding: 10px;
background-color: aliceblue;
box-shadow: 5px 5px 5px gray;
}
/*区块标题大小、颜色*/
section h2 {
color: orange;
}
section h3 {
color: gray;
}
/*段落首行缩进*/
section p {
text-indent: 2em;
}
/*作者 时间:颜色、间距*/
.author,.addtime {
color: lightgray;
word-spacing:50px;
}
.content-header span {
}
/*图片边框、阴影、鼠标悬停变形角度*/
section img {
width: 600px;
border: 3px dotted red;
border-radius: 20px;
box-shadow: 8px 8px 8px gray;
display: block;
margin: auto;
}
section img:hover{
-webkit-transform: rotateZ(30deg);
-moz-transform: rotateZ(30deg);
-o-transform: rotateZ(30deg);
-ms-transform: rotateZ(30deg);
transform: rotateZ(30deg);
}
/*内容区块一链接处理*/
section p a{
text-decoration: none;
color: green;
}
/*首字母大小*/
p::first-letter{
font-size: 30px;
}
/*有序列表第三子项颜色*/
ol li:nth-child(3){
color: red;
}
/*视频剧中*/
#advideo {
text-align: center;
}
/*表格长度、边框*/
table {
width: 100%;
border-collapse: collapse;
border: 1px solid gray;
margin: 0 auto;
}
/*表头设置*/
th {
background-color: black;
color: white;
}
/*最后一行单元格颜色、背景色*/
tr:last-child{
background-color: limegreen;
color: dimgray;
}
/*表格标题居左、加粗*/
table caption {
text-align:left;
font-weight: 10px;
}

.tablea a{
color: blue;
}

/*侧边栏边距、背景、阴影*/
aside {
margin: 35px;

margin-bottom:10px;

background-color: aliceblue;
box-shadow: 5px 5px 5px gray;
}
/*表格内边距*/
#sider-form {
padding: 10px;
}
/*左侧文字区*/
aside .form-left {
display: inline-block;
text-align: right;
width: 30%;
margin-right: .5em;
margin-top: .5em;
}
/*右侧输入区*/
aside .form-right {
display: inline-block;
}
/*文本框对齐*/
textarea {
vertical-align: text-top;
}
/*表格提交按钮样式*/
aside button {
width: 100%;
height: 50px;
background-color: deepskyblue;
border-radius: 10px;
}
/*表格提交按钮变换*/
aside button:hover{
background-color: orange;
}
/*页脚设置*/
footer {
line-height: 50px;
background-color: gray;
color: white;
text-align: center;
margin-top: 5px;
}
</style>
</head>
<body>
<header>
<img class="logo" src="http://blog-1251150274.costj.myqcloud.com/web/baidu-logo.png" />
<nav>
<ul class="links">
<li><a href="#1">导航链接一</a></li>
<li><a href="#2">导航链接二</a></li>
<li><a href="#3">导航链接三</a></li>
<li><a href="#4">导航链接四</a></li>
</ul>
</nav>
</header>
<main>
<article>
<section>
<h2>文章一级标题</h2>
<h3>文章二级标题</h3>
<div class="content-header">
<span class="author">文章作者</span>
<span class="addtime">文章发表时间</span>
</div>
<p>
Web开发项目考核Web开发项目考核Web开发项目考核Web开发项目考核Web开发项目考核Web开发项目考核Web开发项目考核<a href="http://www.baidu.com">这里有个链接,链接到http://www.baidu.com</a>Web开发项目考核Web开发项目考核,该换行了<br/>Web开发项目考核Web开发项目考核Web开发项目考核<span style="color:black"><b>这里有个粗字体</b></span>Web开发项目考核Web开发项目考核
</p>
<img src="http://blog-1251150274.costj.myqcloud.com/web/wp.jpg"/>
<p>
Web开发项目考核Web开发项目考核Web开发项目考核Web开发项目考核Web开发项目考核Web开发项目考核Web开发项目考核<a href="http://www.baidu.com" target="_blank">这里有个链接,会在新窗口打开</a>Web开发项目考核Web开发项目考核Web开发项目考核Web开发项目考核Web开发项目考核Web开发项目考核Web开发项目考核
</p>
</section>
<section>
<h2>另一篇文章一级标题</h2>
<h3>文章二级标题</h3>
<div class="content-header">
<span class="author">文章作者</span>
<span class="addtime">文章发表时间</span>
</div>
<!--有序列表-->
<ol>
<li>排名一</li>
<li>排名二</li>
<li>排名三</li>
<li>排名四</li>
</ol>
<div id="advideo">
<div>请欣赏视频:</div>
<!--引入视频控件及封面-->
<video id="advideo" src="http://blog-1251150274.costj.myqcloud.com/web/sample.mp4" width="640px"controls poster="http://blog-1251150274.costj.myqcloud.com/web/sample.jpg"></video>
</div>
<!--书写表格,最后两格合并-->
<table border="1">
<caption>下面是一个表格</caption>
<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>
<td >单元格</td>
<td>单元格</td>
<td><a href="">操作</a></td>
</tr>
<tr>
<td colspan="1">总计</td>
<td colspan="2">1000</td>
</tr>
</table>
</section>
</article>
</main>
<aside>
<div id="sider-form">
<h3>注册窗口</h3>
<!--书写表单-->
<form>
<!--邮箱地址-->
<div>
<!--绑定标签与输入框-->
<label class="form-left" for="form-right">请输入邮箱地址</label>
<div class="form-right">
<input type="text" placeholder="这是一个文本输入框"/>
<span><i>邮箱地址请按要求格式输入</i></span>
</div>
</div>
<!--输入密码-->
<div>
<!--绑定标签与输入框-->
<label class="form-left" for="form-right">请输入密码</label>
<div class="form-right">
<input type="password" />
<span><i>密码应为6-16位英文数字</i></span>
</div>
</div>
<!--再输入密码-->
<div>
<!--绑定标签与输入框-->
<label class="form-left" for="form-right">请重复输入密码</label>
<div class="form-right">
<input type="password" />
</div>
</div>
<!--性别单选-->
<div>
<label class="form-left" for="form-right">性别</label>
<div class="form-right">
<input type="radio" name="sex"/>
<input type="radio" name="sex"/>
</div>
</div>
<!--城市下拉列表-->
<div>
<label class="form-left" for="form-right">城市</label>
<select class="form-right" autofocus size=1>
<option >北京</option>
<option >上海</option>
<option >南京</option>
<option >香港</option>
</select>
</div>
<!--爱好复选-->
<label class="form-left">爱好</label>
<input type="checkbox" name="fav"/>运动
<input type="checkbox" name="fav"/>艺术
<input type="checkbox" name="fav"/>科学
<br />
<!--个人描述,绑定标签-->
<label class="form-left" >个人描述</label>
<textarea cols="30" rows="10" placeholder="这是一个多行输入框,输入您的个人描述"></textarea>
<!--提交按钮-->
<button>确认提交</button>
</form>
</div>
</aside>
<footer>版权所有</footer>
</body>
</html>
继续阅读
  • 版权声明: 发表于 2017年3月29日14:29:03
  • 转载注明:https://x1995.cn/581.html
Linux网络编程入门 IT相关

Linux网络编程入门

转自网页 客户端和服务端 网络程序和普通的程序有一个最大的区别是网络程序是由两个部分组成的--客户端和服务器端. 客户端 在网络程序中,如果一个程序主动和外面的程序通信,那么我们把这个程序称为客户端程...
实用的html代码 IT相关

实用的html代码

结构性定义 文件类型<HTML></HTML> (放在档案的开头与结尾) 文件主题<TITLE></TITLE> (必须放在「文头」区块内) 文头<...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: