练习2-百度前端技术学院 - 零基础 HTML 及 CSS 编码（一）

最新推荐文章于 2024-07-11 17:17:41 发布

RecordInLife

最新推荐文章于 2024-07-11 17:17:41 发布

阅读量704

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/itzhengmaolin/article/details/75281989

版权

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等等属性应用的好陌生要记得加强下了

RecordInLife

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
练习2-百度前端技术学院 - 零基础 HTML 及 CSS 编码（一）

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;}
复制链接

扫一扫