HTML入门网页制作，HTML+css运用做出

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

 以下是HTML内容：

    
        
        

    
    
        

            

                
                
NASA中文网

                
保护地球，探索宇宙，发现文明
            
                

                    
                    
                
                

                    
                    

                        

                            首页
                        
                        

                            每日一图
                            

                                

                                    天文
                                
                                

                                    望远镜
                                
                            
                        
                        

                            文章分类
                        
                        

                            关于我们
                        
                        

                            注册
                        
                        

                            登录
                        
                    
    
        
        

        
            
        
    

        
关于我们
        
只要填了你的名字，国家以及邮箱，你就能收到一张制作精美，有着编号的火星船票。

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

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

,参与者的名字将会被NASA收集在一枚小芯片里，于2026年7月发射，2027年到达火星，并永久地留在火星上，爱意或许会东升西落，但浪漫将在宇宙中至死不渝。
        
    
    

            
视频资料
            

                
            
        
        

            
设计制作：北游当南归

        
    

以下是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;/* 居中 */
}

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