html css制作的简单网页（可供练习）

最新推荐文章于 2024-10-24 08:06:31 发布

一只829

最新推荐文章于 2024-10-24 08:06:31 发布

阅读量1.5k css html webview

本文链接：https://blog.csdn.net/qq_63533863/article/details/123350780

代码图片在这里：

<!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">
        <h1 >Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>

立即使用