致美创意
致美创意网站
1.首页
效果：
首页的html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" type="text/css" href="css.css">
<!-- 外链 -->
</head>
<body>
<!-- 网页头部 -->
<div id="d_Header">
<div id="d_header">
<img src="../img/homepage_03.png" id="img_header_tel">
</div>
</div>
<!-- 导航栏 -->
<div id="d_nav">
<a href="#" id="a_logo"></a><!-- 没有页面跳转，这就是回到顶部操作 -->
<nav id="nav_nav"><!-- 导航栏标签 -->
<span>
<a href="首页.html" class="a_nav" id="a_nav1">首页</a><span class="s_float">|</span>
<a href="关于致美.html" class="a_nav" >关于致美</a><span class="s_float">|</span>
<a href="成功案例.html" class="a_nav" >成功案例</a><span class="s_float">|</span>
<a href="新闻动态.html" class="a_nav" >新闻动态</a><span class="s_float">|</span>
<a href="在线咨询.html" class="a_nav" >在线咨询</a><span class="s_float">|</span>
<a href="联系我们.html" class="a_nav" >联系我们</a>
</span>
</nav>
</div>
<a href="#" id="a_imgbg"></a>
<div id="d_body">
<div id="d_function">
<a href="#" id="a_function1"></a>
<a href="#" id="a_function2"></a>
<a href="#" id="a_function3"></a>
<a href="#" id="a_function4"></a>
<a href="#" id="a_function5"></a>
</div>
<div id="d_exhibition"><!-- exhibition:展示 -->
<div>
<div class="d_head">EXGIBITION</div>
<hr class="hr_head" color="#2d3237"/>
<span id="s_head_chinese">案例展示</span>
</div>
<div id="d_exhibition_bord">
<div class="d_bord" id="d_bord1">
<a href="#" class="a_hord_img"></a>
<a href="#" class="a_bord_chinese">品牌设计</a>
<a href="#" class="a_bord_eng">brand design</a>
</div>
<div class="d_bord" id="d_bord2">
<a href="#" class="a_hord_img" id="a_hord_img2"></a>
<a href="#" class="a_bord_chinese" id="a_bord_chinese2">平面设计</a>
<a href="#" class="a_bord_eng">graphic design</a>
</div>
<div class="d_bord" id="d_bord3">
<a href="#" class="a_hord_img" id="a_hord_img3"></a>
<a href="#" class="a_bord_chinese">网页设计</a>
<a href="#" class="a_bord_eng">bweb design</a>
</div>
<div class="d_bord" id="d_bord4">
<a href="#" class="a_hord_img" id="a_hord_img4"></a>
<a href="#" class="a_bord_chinese">电子商城</a>
<a href="#" class="a_bord_eng">electronic mall</a>
</div>
<div class="d_bord" id="d_bord5">
<a href="#" class="a_hord_img" id="a_hord_img5"></a>
<a href="#" class="a_bord_chinese" id="a_bord_chinese5">空间建筑</a>
<a href="#" class="a_bord_eng">space/<br>architecture</a>
</div>
</div>
</div>
<div id="d_about_us">
<div>
<div class="d_head">ABOUT<span class="s_white">US</span></div>
<hr class="hr_head" color="#2d3237"/>
<span id="s_head_about">关于我们</span>
</div>
<div id="d_about_us_text">
<h3 id="h3_about_head">致美创意，因为专注，所以专业</h3>
<p id="d_about_text">
无论您是创业路向上的文艺青年，店面商品的老板，需要强化品牌的企业家，网店店主...<br/>
我们都能为你提供高端、低价的设计、，我们以最有效，最快速的方式为您提供最合适的设计方案
</p>
</div>
</div>
<div id="d_process">
<div>
<div class="d_head">SERVICE<span class="s_white">PROCESS</span></div>
<hr class="hr_head" color="#2d3237"/>
<span id="s_head_procrss">服务流程</span>
</div>
<div id="d_process_contain">
<img src="../img/homepage_29.png" class="img_process">
<span classs="s_process">项目洽谈，根据需求报价</span>
<img src="../img/homepage_40.png" class="img_right">
<img src="../img/homepage_31.png" class="img_process">
<span classs="s_process">预付定金，开始设计</span>
<img src="../img/homepage_40.png" class="img_right">
<img src="../img/homepage_34.png" class="img_process">
<span classs="s_process">修改定稿，完成设计</span>
<img src="../img/homepage_40.png" class="img_right">
<img src="../img/homepage_37.png" class="img_process">
<span classs="s_process">签收付尾款</span>
</div>
</div>
</div>
<div id="d_BOTTOM">
<div id="d_boottpm">
<p>
<a href="#" class="a_bottom">首页</a>|
<a href="#" class="a_bottom">关于致美</a>|
<a href="#" class="a_bottom">成功案例</a>|
<a href="#" class="a_bottom">在线咨询</a><br/>
Copyright ©2021-3-27 致美工作室<br/>
技术支持:<a href="#" class="a_bottom">凡客建站</a><a href="#" class="a_bottm">管理登录
</p>
</div>
</div>
<a href="#" id="a_fixed">在线客服<img src="../img/homepage_0311_03.png"></a>
</body>
</html>
首页的css
```html
*{
padding: 0;
margin: 0 auto;
font-size: 13px;
/*字体大小*/
font-family: "微软雅黑";
}
div
{
overflow: hidden;/*溢出隐藏*/
}
img{
border:0;
}
a{
text-decoration: none; /*定义标准的文本*/
color: black;
}
/*——————————————顶部————————————————*/
#d_Header{
width: 100%;
background-image:linear-gradient(to top,#dadada,#f7f7f7);
/* 渐变语法：从上到下（默认）。
可以定义一个角度，来取代预定义的方向（向下、向上、向右、向左、向右下等等）。
值 0deg 等于向上（to top）。值 90deg 等于向右（to right）。值 180deg 等于向下（to bottom）。
可以多个颜色，但是方向只有一个。*/
border-bottom: 1px solid #eeeeee;
}
#d_header{
width: 1600px;
/*950px不行，居中右浮动宽度不够。即中间划分
不确定？？？
*/
margin: 0 auto;
height: 34px;
}
#img_header_tel{
float: right;
margin-right: 9px;
margin-top:10px;
display: inline;/*内联元素(display:inline)，设置宽和高的时候是不起作用的，不影响换行*/
}
/*——————————————导航栏————————————————*/
#d_nav{
width: 950px;/*大了会过渡偏向左*/
margin: 0 auto;
height: 99px;
/*border:1px solid black;*/
}
#a_logo{
background: url(../img/homepage_07.png);
float: left;
margin-left: 10px;
margin-top: 42px;
width: 195px;
height: 41px;
display: inline;/*内联元素(display:inline)，设置宽和高的时候是不起作用的，不影响换行*/
}
#nav_nav{
float: right;/*导航条右浮动*/
margin-right: 64px;
margin-top: 48px;
}
.a_nav{
width: 80px;
margin: 0 10px;
float-size:13px;
float: left;/*相较于导航条nav标签*/
text-align: center;/*文本内容居中*/
display: inline;
height: 29px;
}
.a_nav:hover{
font-weight:bold; /*字体变粗*/
}
/*————————————这之前对span的|没有设置他们会在最后排在一起,下面设置使|在每个字后面——————————————*/
.s_float{
float: left ;
display: inline;
}
/*————————————对span的|设置使|在每个字后面,完成——————————————*/
#a_nav1{
border-bottom: 3px solid black;
}/*文字下的横线*/
/*——————————————首页图片————————————————*/
#a_imgbg{
background: url(../img/homepage_10.png) no-repeat center top;
/*no-repeat不允许重复 center：水平居中 top：垂直*/
display: block;
width: 950px;
height: 400px;
margin: 0 auto;
}
/*——————————————首页图片下方整体————————————————*/
#d_body{
width: 950px;
margin: 0 auto;
margin-top: 45px;
position: relative;/*相对定位*/
}
#d_function{
width: 100%;
height: 178px;
padding: 0 36px;
}
#a_function1{
background: url(../img/homepage_13.png);
width: 108px;
height: 110px;
float: left;
margin-right: 84px;/*??????，没有变化*/
display: inline;
}
#a_function2{
background: url(../img/homepage_15.png);
width: 108px;
height: 110px;
float: left;
margin-right: 84px;
display: inline;
}
#a_function3{
background: url(../img/homepage_17.png);
width: 108px;
height: 110px;
float: left;
margin-right: 84px;
display: inline;
}
#a_function4{
background: url(../img/homepage_19.png);
width: 108px;
height: 110px;
float: left;
margin-right: 84px;
display: inline;
}
#a_function5{
background: url(../img/homepage_21.png);
width: 108px;
height: 110px;
float: left;
/*margin-right: 84px;有了宽度不够*/
display: inline;
}
/*——————————————案例展示————————————————*/
#d_exhibition{
height: 446px;
}
.d_head{
height: 32px;
background: #2d3237;
border-bottom: 1px solid #dadbdc;
text-align: center;
font-size: 24px;
font-weight: normal;
text-shadow:1px -1px 1px #a31618;/*阴影:水平 垂直 模糊距离 颜色*/
color:#ff0000;
}
#s_head_chinese{
font-size: 14px;
width: 76px;
height: 14px;
position: absolute;
top:212px;
left: 442px;
background: white;
color: black;
text-align: center;
}
.hr_head{
border-top: 1px solid #efe8e9;
margin-top: 8px;
}
#d_exhibition_bord{
margin-top: 46px;
width: 100%;
}
.d_bord{
width: 172px;
height: 300px;
float: left;
display: inline;
margin-right: 20px;
}
#d_bord1{
background: #2d3237;
}
.a_hord_img{
display: block;
background: url(../img/homepage_30_29.png);
width: 230px;
height: 230px;
}
#a_hord_img2{
background: url(../img/homepage_30_31.png);
}
#a_hord_img3{
background: url(../img/homepage_30_33.png);
}
#a_hord_img4{
background: url(../img/homepage_30_35.png);
}
#a_hord_img5{
background: url(../img/homepage_30_37.png);
}
.a_bord_chinese{
display: block;
margin-top: 14px;
margin-left: 27px;
font-size: 13px;
line-height: 19px;/*行间距，行高*/
color: #fc0000;
}
.a_bord_eng{
color: white;
display: block;
margin-left: 27px;
font-size: 17px;
font-variant: small-caps;/*小写变大写*/
line-height: 17px;
}
#d_bord2{
background: #ff0000;
}
#d_bord3{
background: #2d3237;
}
#d_bord4{
background: #2d3237;
}
#d_bord5{
background: #ff0000;
margin-right: 0;
}
#a_bord_chinese2{
color: black;
}
#a_bord_chinese5{
color: black;
}
/*——————————————关于我们————————————————*/
#d_about_us{
height: 250px;
text-align: center;
}
.s_white{
color: white;
font-size: 24px;
}
#s_head_about{
font-size: 14px;
width: 76px;
height: 14px;
position: absolute;
top:657px;
left: 442px;
background: white;
color: black;
text-align: center;
}
#h3_about_head{
margin-top: 22px;
color: #666666;
}
#d_about_us_text{
line-height:27px;
}
#h3_about_head{
font-size: 18px;
line-height: 34px;
}
/*——————————————流程————————————————*/
#d_process{
height: 245px;
}
#s_head_procrss{
font-size: 14px;
width: 76px;
height: 14px;
position: absolute;
background: white;
bottom: 198px;
left: 442px;
color: black;
text-align: center;
}
#d_process_contain{
margin: 48px auto;
width: 750px;
height: 22px;
overflow: visible;
}
#img_process{
float: left;
margin-right: 14px;
display: inline;
margin-top: -5px;
}
#s_process{
float: left;
margin-right: 14px;
color:#666666;
display: inline;;
float-size:12px;
font-weight: bold;
}
#img_right{
float: left;
margin-right: 11px;
margin-top: 5px;
display: inline;
}
/*——————————————底部————————————————*/
#d_BOTTOM{
background-color: #eaeaea;
border-top: 1px solid #b4b4b4;
}
#d_boottpm{
width: 950px;
height: 57px;
margin:0 auto;
text-align: center;
padding: 30px 0px;
line-height: 22px;
}
.a_bottom:hover{
font-weight: bold;
}
/*——————————————在线客服————————————————*/
#a_fixed{
width: 13px;
height: 89px;
border-radius: 3px 0px 0px 3px;
position: fixed;/*相较于浏览器*/
right: 0px;
top: 234px;
background-image: linear-gradient(to right,#e80e0d 20%,#b32524 80%);
color: white;
padding: 12px 5px 11px 7px;
line-height: 17px;
font-size: 11px;
display: block;
text-align: center;
}
2.关于致美
效果
关于致美的html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于我们</title>
<link rel="stylesheet" type="text/css" href="css1.css">
</head>
<body>
<div id="d_Header">
<div id="d_header">
<img src="../img/homepage_03.png" id="img_header_tel">
</div>
</div>
<!-- 导航栏 -->
<div id="d_nav">
<a href="#" id
最低0.47元/天 解锁文章
892
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
