8-12前端技术html

于 2019-08-12 12:14:36 发布
阅读量156 收藏
点赞数
分类专栏： 实训
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/crystallf/article/details/99290496
版权
  1. html
<head>|<meta>|<title>
  1. img 中src（路径） alt（加载失败显示文本）
  2. table ->tr+td
  3. 表单
    表单控件：文本框|密码框|复选框
    提示信息：表单控件前的文字说明
    表单域：->(控件+提示)
  4. ul+li
  5. 超链接a -> target
  6. 根据以上做一个网页如
    http://ent.163.com/movie/
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>网易电影</title>
</head>

<body>
    <div name="all" style="border:black 1px solid;">
        <div name="top" style="border:black 1px solid;">
            <ul style="list-style: none;">
                <li style="float: left;"><img src="top1-1.png" /></li>
                <li style="float: left;"><img src="top1-2.png" /></li>
                <li style="float: left;"><img src="top1-3.png" /></li>
                <li style="float: left;">网易首页></li>
                <li style="float: left;">网易娱乐></li>
                <li style="float: left;">网易电影</li>
            </ul>
            <br />
            <br />
            <hr style="border-color: red" />
            <p>
                &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;
                <a href="http://ent.163.com/" target="_blank" class="navb_sub first">首页</a>
                &nbsp; &nbsp;&nbsp; &nbsp; /&nbsp; &nbsp;&nbsp; &nbsp;
                <a href="http://ent.163.com/special/star_news/" target="_blank">明星</a>
                &nbsp; &nbsp;&nbsp; &nbsp; /&nbsp; &nbsp;&nbsp; &nbsp;
                <a href="http://ent.163.com/special/00032VQS/zongyijiemu.html" target="_blank">综艺</a>
                &nbsp; &nbsp;&nbsp; &nbsp; /&nbsp; &nbsp;&nbsp; &nbsp;
                <a href="http://music.ent.163.com/" target="_blank" class="navb_sub">音乐</a>
                &nbsp; &nbsp;&nbsp; &nbsp; /&nbsp; &nbsp;&nbsp; &nbsp;

                原创&nbsp; &nbsp;&nbsp; &nbsp;
                <a href="http://ent.163.com/special/focus_ent/" target="_blank">娱乐FOCUS</a>
                &nbsp; &nbsp;&nbsp; &nbsp;
                <a href="http://ent.163.com/special/ylxxp/" target="_blank">娱乐新鲜派</a>
                &nbsp; &nbsp;&nbsp; &nbsp;
                <a href="http://ent.163.com/special/gsbjb/" target="_blank">稿事编辑部</a>
                &nbsp; &nbsp;&nbsp; &nbsp;
                <a href="http://ent.163.com/special/xbkhz/" target="_blank">星捕快</a>
                &nbsp; &nbsp;&nbsp; &nbsp;
                <a href="http://ent.163.com/special/fmgs/" target="_blank">封面故事</a>
                &nbsp; &nbsp;&nbsp; &nbsp;
            </p>
        </div>

        <!-- style="border:black 10px solid;" -->
        <div name="main" style="border:black 1px solid;float: left;">
            <div name="main-left" style="border:black 1px solid;float: left;margin-left: 45px;margin-top: 10px">
                <img src="3.png" />
            </div>

            <div name="main-right1" style="border:black 1px solid;float: left;margin-left: 30px;margin-top: 10px">
                <img src="4.png" />
            </div>

            <div name="main-right2" style="border:black 1px solid;float: left;margin-left: 30px;margin-top: 10px">
                <img src="5.png" />
            </div>

            <div name="main-bottomleft" style="border:black 1px solid;float: left; width: 22%;margin-left: 45px;margin-top: 10px">
                <b style="padding: 10px;">点击排行</b>
                <hr style="border-color: red" />
                <ol>
                    <li style="padding: 10px"><a href="#">李嫣否认逛街两小时花十万：这都有人信 很好笑</a></li>
                    <li style="padding: 10px"><a href="#">上海堡垒》票房口碑扑街 官微发文：这是烂片？</a></li>
                    <li style="padding: 10px"><a href="#">范思哲把香港澳门列为国家 品牌代言人杨幂发声明</a></li>
                    <li style="padding: 10px"><a href="#">第二个范思哲？奢侈品牌蔻驰将香港台湾列为国家</a></li>
                    <li style="padding: 10px"><a href="#">上海堡垒》导演滕华涛道歉:不想关中国科幻的门</a></li>
                </ol>
            </div>

            <div name="main-leftcenter" style="border:black 1px solid;float: left;margin-left: 17px;margin-top: 10px">
                <table>
                    <tr>
                        <td><a href="#"><img src="main1-1.png" /></td>
                        <td>《保持沉默》湖南路演 呼吁青少年成长问题</td>
                    </tr>
                    <tr>
                        <td><a href="#"><img src="main1-2.png" /></td>
                        <td>《保持沉默》湖南路演 呼吁青少年成长问题</td>
                    </tr>
                    <tr>
                        <td><a href="#"><img src="main1-3.png" /></td>
                        <td>《保持沉默》湖南路演 呼吁青少年成长问题</td>
                    </tr>
                </table>

            </div>

            <div name="main-leftright" style="border:black 1px solid;float: left;margin-left: 18px;margin-top: 10px">
                <b style="padding: 10px;">娱乐Focus</b>     
                <hr style="border-color: red" />
                <table>
                    <tr>
                        <td>
                            《乐夏》收官|摇滚练习生们的进退
                        </td>
                        <td>
                            <img src="main2-1.png" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            《乐夏》收官|摇滚练习生们的进退
                        </td>
                        <td>
                            <img src="main2-1.png" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            《乐夏》收官|摇滚练习生们的进退
                        </td>
                        <td>
                            <img src="main2-1.png" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            《乐夏》收官|摇滚练习生们的进退
                        </td>
                        <td>
                            <img src="main2-1.png" />
                        </td>
                    </tr>
                </table>
            </div>


        </div>

        <div name="foot" style="padding:10px; width:100%;border:black 1px solid;float: left;text-align: center">

            <span class="N-nav-bottom-copyright"><span class="N-nav-bottom-copyright-icon">&copy;</span> 1997-2019
                网易公司版权所有</span>
            <br />
            <a href="http://corp.163.com/">About NetEase</a> |
            <a href="http://gb.corp.163.com/gb/about/overview.html">公司简介</a> |
            <a href="http://gb.corp.163.com/gb/contactus.html">联系方法</a> |
            <a href="http://corp.163.com/gb/job/job.html">招聘信息</a> |
            <a href="http://help.163.com/ ">客户服务</a> |
            <a href="http://gb.corp.163.com/gb/legal.html">隐私政策</a> |
            <a href="http://emarketing.163.com/">广告服务</a> |
            <a href="http://sitemap.163.com/">网站地图</a> |
            <a href="http://jubao.aq.163.com/">不良信息举报</a>
        </div>
    </div>

</body>

</html>
想上天的小李
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值