练习2-百度前端技术学院

来源：互联网发布：格林德沃知乎编辑：程序博客网时间：2024/04/28 21:46
http://www.earnfish.com/article/1494078795780
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        body{background: black;}        .ul1{float: right;}        .ul1 li{float: left;margin-right:30px;color:#FFF;}        .clear_float{clear: both;}        .div1{border:20px solid rgb(222,222,222);padding: 20px;background: #FFF;}        .div2{width: 100px;height:100px;border: 1px solid black;padding: 10px;text-align:center;margin-bottom: 10px;}        .div2 img{width: 80px;height: 80px;}    </style></head><body>    <ul class="ul1">        <li>导航链接一</li>        <li>导航链接二</li>        <li>导航链接三</li>        <li>导航链接四</li>    </ul>    <div class="clear_float"></div>    <div class="div1">        <h1>文章一级标题</h1>        <h2>文章二级标题</h2>        <pre>文章作者   文章发表时间</pre>        <p>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落,换行了</p>        <br>        <p>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落</p>        <p>这是一个很长很长的段落,这是一个很长很长的段落,这是一个很长很长的段落 , <a href="www.baidu.com">链接到百度</a>这是一个很长很长的段落,<strong>这里粗体</strong>这是一个很长很长的段落,</p>        <img src="1.jpg">        <a href="www.sina.com" target="blank">点击在新窗口打开新浪</a>        <br>    </div>    <div class="div1">        <div class="div2"><img src="1.jpg"></div>        <div class="div2"><img src="1.jpg"></div>        <div class="div2"><img src="1.jpg"></div>    </div>    <div class="div1">    <ol>        <li>排名1</li>        <li>排名2</li>        <li>排名3</li>    </ol>    <table border="1px solid black">        <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 colspan="2" align="center">1000</td>        </tr>    </table>    </div>    <div class="div1">    <form>        请输入邮箱地址:<input type="text" name="" placeholder="这是一个文本输入框">        <br>        请输入密码:<input type="password" name="" placeholder="这是一个文本输入框">        请重复输入密码:<input type="password" name="" placeholder="这是一个文本输入框">        <br>        性别：<input type="radio" name="sex" id="boy"> <label for="boy">男</label>   <input type="radio" name="sex" id="girl"><label for="girl">女</label>        <br>        城市:<select>            <option>北京</option>            <option>上海</option>            <option>广州</option>        </select>        爱好:<input type="checkbox" name="hobby" value="sport">运动        <input type="checkbox" name="hobby" value="art">艺术        <input type="checkbox" name="hobby" value="science">科学        个人描述: <textarea cols="5" rows="5">这是一个多行输入框</textarea>        <input type="button" name="" value="确认提交">        <div>版权所有&copy;</div>    </form>    </div></body></html>
总结:
对一些CSS属性还不是很熟悉。像text-align、line-height等等属性应用的好陌生要记得加强下了
阅读全文
0 0