HTML入门网页制作，HTML+css运用做出_html+css网页制作-CSDN博客

本文链接：https://blog.csdn.net/weixin_64284850/article/details/123327707

效果图所示，带有搜索框的简单网页

以下是HTML内容：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>NASA中文网</title><!-- 网页标题 -->
<link rel="stylesheet" type="text/css" href="../css/style.css"/><!-- 连接css配置 -->
    </head>
    <body>
        <div class="header"><!-- 总体命名 -->
            <div class="logo"><!-- 命名logo -->
                <img src="../img/nasa.jpg"alt="Smiley face" width="150" height="150" ><!-- logo长宽 -->
                <h4>NASA中文网</h4><!-- 大标题 -->
                <p>保护地球，探索宇宙，发现文明</p>
            </div>
                <div class="form"><!-- 添加搜索框 -->
                    <input type="text"placeholder="NASA送我一张火星的船票">
                    <button><img src="../img/搜索图标.jpg" ></button><!-- 为按钮添加样式，button按钮的意思 双标签等价于<input type="button"value=""> -->
                </div>
                <div class ="nav"><!-- 导航栏 -->
                    
                    <ul>
                        <li>
                            <a href="">首页</a><!-- 超链接 -->
                        </li>
                        <li>
                            <a href="">每日一图</a><!-- 超链接 -->
                            <ul>
                                <li>
                                    <a href="">天文</a><!-- 超链接 二级菜单-->
                                </li>
                                <li>
                                    <a href="">望远镜</a><!-- 超链接 二级菜单-->
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="">文章分类</a><!-- 超链接 -->
                        </li>
                        <li>
                            <a href="">关于我们</a><!-- 超链接 -->
                        </li>
                        <li>
                            <a href="">注册</a><!-- 超链接 -->
                        </li>
                        <li>
                            <a href="">登录</a><!-- 超链接 -->
                        </li>
                    </ul>    
        </div>
        <div class="banner"><!-- 命名banner -->
        <img src="../img/banner.jpg" ><!-- banner素材图 -->
            
        </div>
    <div class="about"><!-- 命名文字内容 -->
        <h3>关于我们</h3>
        <p><!-- 段落标签 -->只要填了你的名字，国家以及邮箱，你就能收到一张制作精美，有着编号的火星船票。

NASA 会把所有申请人的名字用极小的字刻在硅芯片里面，然后用太空船发射到火星上去。

这个活动 NASA 也不是第一次搞了。最早的时候，在 2008 年， NASA 就搞过一次类似的活动，征集了两百多万个名字，然后把他们也是刻在芯片上送到了火星。这或许是人类在宇宙中渺小但浪漫的方式，我们绝大部分人无法亲身前往火星，每张船票上都有世间唯一的编码

,参与者的名字将会被NASA收集在一枚小芯片里，于2026年7月发射，2027年到达火星，并永久地留在火星上，爱意或许会东升西落，但浪漫将在宇宙中至死不渝。</p>
        
    </div>
    <div class="about"><!-- 命名关于视频资料 -->
            <h3>视频资料</h3>
            <div class="video">
                <video width="1220" height=""controls="controls"autoplay>
                    <source src="../img/nasa.mp4" type="" type="video/mp4"></source><!-- 视频长宽和自动播放 -->
                </video>
            </div>
        </div>
        <div class="footer">
            <p>设计制作：北游当南归</p><!-- 水印 -->
        </div>
    </body>
</html>

以下是css内容：

*{/* 整体配置 */
    margin: 0;/* 外边距 */
    padding: 0;/* 内边距 */
}
body{/* 总体 */
    font-size: 16px;/* 整体尺寸,下面可以继承 */
}
li{/* 所有标签 */
    list-style: none;/* 所有标签默认样式无 */
}
.logo{/* logo部分 */
    width: 100%;/* 长度占整个网页100% */
    text-align: center;/* 居中显示 */
    margin: 20px 0 50px 0;/* 外边距 */
}
.logo h4{/* 标题标签 */
    cursor: pointer;/* 鼠标移动显示手指点 */
    font-size: 35px;/* 尺寸,像素值 */
    letter-spacing: 2px;/* 字符边距 */
    margin-top: 20px;/* 上边距 有了总边距可以不要*/
    margin-bottom: 5px;/* 下边距 有了总边距可以不要*/
    margin: 20px 0 5px 0;/* h4部分的总边距 */
}
.logo h4:hover{/* 鼠标移动交互标签 */
    color: #CE8460/* 颜色 */;
}
input{
    border: 1;/* 边框样式 */
}
button{/* 按钮 */
    border: 0;/* 边框样式无 */
}
.form{/* 搜索外框 */
    width: 555px;/* 长 */
    height: 35px;/* 高 */
    background-color: #ffffff/* 颜色 */;
    width: 100%;
    text-align: center;
    margin: 30px 0 40px 0;
}
.form>input{/* 搜索内框 */
    width: 512px;/* 宽度 */
    height: 32px;/* 高度 */
    background-color: #FFFFFF/* 颜色 */;
    font-size: 16px;/* 边距 */
    padding-left: 3px;/* 边距 */
}
.form>button{/* 按钮 */
    width: 35px;/* 长 */
    height: 35px;/* 高 */
    background-color:#FFFFFF/* 颜色 */;
}
.form>button>img{/* 搜索图标 */
    width: 35px;/* 长 */
    height: 35px;/* 高 */
}
.nav{/* 导航栏 */
    width: 100%;/* 长度 */
    height: 60px;/* 高度 */
    border-top: 1px solid #CCCCCC;/* 颜色  上边距线 */
    border-bottom: 1px solid #CCCCCC;/* 颜色  下边距线 */
}
.nav>ul/* >的意思是作用给到子元素 */{/* 导航栏标签 */
    display: flex;/* 弹性布局 */
    justify-content: center;/* 居中 */
    padding: 20px 0;/* 上下边距 */
}
.nav>ul>li/* > 的意思是作用给到子元素 */{/* 导航栏标签的副级 */
    position: relative;/* 相对定位 */
    margin: 0 20px;/* 左右边距 */
    }
.nav>ul>li>a{/* 超链接 */
    color: #333/* 颜色 */;
    text-decoration: none;/* 下划线设置无 */
}    
.nav ul li a:hover{/* 导航栏交互 */
    color: #CE8460/* 颜色 */;
}
.nav ul li ul{/* 二级菜单 */
    display: none;/* 默认不展开 */
    position: absolute;
    top: 30px;/* 顶部边距 */
    left: 0px;/* 左边距 */
    background:#f2f2f2 /* 背景颜色 */;
    padding: 10px;/* 上下左右边距 */
    width: 80px;/* 长度 */
}
.nav ul li li{/* 二级菜单边框 */
    margin: 5px o;/* 边框值 */
}
.nav>ul>li/* > 的意思是作用给到子元素 */:hover ul{
    display: block;/* 二级菜单交互展示 */
}
.banner{/* banner标签 */
    width: 1220px;/* 尺寸 */
    margin: 20px auto;/* 上下左右边距 */
}
.banner img{/* banner图 */
    width: 100%;/* 放大 */
}
.about{/* 标签 */
    width: 1220px;/* 长度 */
    margin: auto;/* 自动对齐 */
}
.about h3{/* about下面的h3标签 */
    display: flex;
    align-items: center;/* 弹性布局居中 */
    color: #CE8460/* 颜色 */;
    font-size: 24px;/* 大小 */
}
.about h3::before{/* h3标签前面的小边框 */
    content: '';/* 设置样式 */
    display: inline-block;/* 同一行 */
    width: 5px;/* 长度 */
    height: 20px;/* 高度 */
    margin-right: 10px;/* 空距 */
    background: #CE8460/* 背景颜色 */;
}
.about p{/* p标签 */
    line-height: 1.8;/* 行高 */
    margin: 20px 0;/* 上下边距 */
    text-indent: 2em;/* 首行缩进 */
}
.video{/* 视频 */
    margin: 20px 0;/* 边距 */
}
.footer{
    background: #333333/* 颜色 */;
    width: 100%;/* 尺寸 */
    color: #fff/* 颜色 */;
    padding: 10px 0;
    text-align: center;/* 居中 */
}

如有注释不对还请各位前辈批评指正