web开发项目考核

Miracle 2017年3月29日14:29:03干货教程web开发项目考核已关闭评论1,9045258字阅读17分31秒阅读模式
网页传送门文章源自联网快讯-https://x1995.cn/581.html

源代码如下:文章源自联网快讯-https://x1995.cn/581.html

<!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;
}文章源自联网快讯-https://x1995.cn/581.html

.tablea a{
color: blue;
}

/*侧边栏边距、背景、阴影*/
aside {
margin: 35px;文章源自联网快讯-https://x1995.cn/581.html

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>
文章源自联网快讯-https://x1995.cn/581.html
继续阅读
Miracle
  • 本文由 发表于 2017年3月29日14:29:03