| 网页传送门文章源自联网快讯-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{ | |
| /*侧边栏边距、背景、阴影*/ | |
| 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> |
继续阅读
评论