自学web前端练手——静态婚纱店官网

最新推荐文章于 2021-03-11 14:36:30 发布

lvshaoshishang

最新推荐文章于 2021-03-11 14:36:30 发布

阅读量575

点赞数 3

分类专栏：自学web前端文章标签： html5 css3

本文链接：https://blog.csdn.net/lvshaoshishang/article/details/104662412

版权

本文记录了作者自学Web前端时制作的一个静态婚纱店官网的过程。内容包括使用HTML5和CSS3实现页面布局，添加超链接，并对导航栏和超链接进行了美化，如设置悬停时文本变化和去除下划线。

摘要由CSDN通过智能技术生成

自撸，有参照页面，图片百度搜的。
对比昨晚的静态博客页面，今天的加入了超链接以及好几个盒子，外加稍微美化了下页面。

效果如下：
在这里插入图片描述
当鼠标悬停在上方导航栏和点击了解详情超链接时，设置了悬停时文本字样会变大，且把超链接默认的下划线去掉更改了文本颜色。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>婚纱摄影</title>
	<style>
     *{
   
     	margin:0;
     	padding: 0;
     }
     #container{
   
     	width: 1200px;
     	height: 2700px;
     	margin: 0 auto;
     }
     #header1{
   
     	position: fixed;
     	width: 1200px;
     	height: 100px;
     	background-color: #F5F5F5;
     	z-index: 100;
     }
     #header2{
   
     	width: 1200px;
     	height: 1000px;
     	background-color: white;
     	position: relative;
     	background: url("婚纱照/4.jpg");
     }
    #main1{
   
    	width:1200px; 
    	height:750px;
    	background-color: white;
    }
    .aside{
   
    	width: 330px;
    	height: 750px;
        float: left;
    }
    #aside1{
   
        margin-right: 20px;
    }
    #aside2{
   
        margin-left: 20px;
    }
    #content{
   
    	float: left;
    	width: 500px;
    	height: 750px;
    }
    #main2{
   
    	width: 1200px;
    	height: 650px;
    	background-color: white;
    }
    .main1{