html css制作的简单网页(可供练习)

 代码图片在这里:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入清除浏览器默认样式的文件 -->
    <link rel="stylesheet" type="text/css" href="../reset.css"/>
    <link rel="stylesheet" type="text/css" href="./css/index.css"/>
  
</head>
<body>
    <!-- 命名规范 id class 使用英文 
    冥冥格式 首字母小写  每个字母开头字母大写-->
    <!-- 顶部 -->
    <div class="header w">
        
            <ul class="nav">
                <li><a href="#">HOME</a><br>
                     <span>Back to home</span>
                    </br>
                    <li><a href="#">PRODUCTS</a><br>
                        <span>What we have for you</span>
                       </br>
                       <li><a href="#">SERVICES</a><br>
                        <span>Things we do</span>
                       </br>
                       <li><a href="#">BLOG</a><br>
                        <span>Fallow our updates</span>
                       </br>
                       <li><a href="#">CONTACT</a><br>
                        <span>Ways to reach us</span>
                       </br>
            </ul>
            <div class="logo">
                <a href="#" title="一个好网站">
                    <img src="images/img/logo.png" alt="网站的logo">
                </a>
            
        </div>
       
    </div>
    <!-- 导航区 -->
    <div class="banner w">
        <img src="images/img/banner/banner01.png" alt="这是标题">
        <!-- 放导航按钮 -->
        <div class="pointDiv">
            <a href="#"></a>
            <a href="#" class="active"></a>
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
        </div>
    </div>
    <!-- 内容 (三个内容不能撑开父元素导致高度塌陷)-->
    <div class="content w clearfix">
  • 4
    点赞
  • 32
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值