码迷,mamicode.com
首页 > Web开发 > 详细

web基础(6): CSS综合实例-咖啡网页设计

时间:2020-02-10 13:55:15      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:这一   倾斜   das   使用   nbsp   没有   visit   osi   width   

咖啡店案例效果图

技术图片

  (一)页面的布局

1. 最上方的header:右下角是四个小图标,像图层一样附加在当前的header部分上。

2. 超链接构成的导航栏,鼠标悬浮的时候字体颜色发生变化。

3. 主体分为左右两栏:边栏 和右侧的主要内容。边栏有一个table ,table下方是图片(圆角阴影),还有倾斜的效果。右侧主体分为四个子区域,每个区域都有左侧的图片和右侧的文字构成,右侧的文字又有标题和正文内容。

4. footer部分。

5. 左侧有一个“广告”部分,fixed定位。

 ----------------------------

先创建一个站点文件夹,里面创建images, css文件夹。我们采用link来引用css样式。 

HTML基本结构为

<div id="container">
    <div id="header"></div>
    <div id="nav"></div>
    <div id="main">
        <div id="aside"></div>
        <div id="content"></div>
    </div>
    <div id="footer"></div>
</div>

先简单定义上述几个元素的样式

*{
    margin: 0;
    padding: 0;
}
body { 
    font-family:"微软雅黑"; 
    font-size:16px; 
    color: #673929; /*深棕色*/
}
#container {
    margin:0 auto;  /*水平居中*/
    width:900px;     
}
#header { 
    height:220px;    
} #nav{ height:30px; margin-bottom:5px; background:#09c; font: 18px/30px 微软雅黑; color: #fff; letter-spacing: 2px; text-align: center; } #main{ background:#000; /*黑色*/ height:2050px;/* 需要之后根据内容计算,内容有了这个高度就不需要写了*/ } #aside { float:left; width:300px; background:#6cf; text-align: center; font-size: 14px; color: #000; } #content{ float:right; width:595px; margin-bottom:5px; background:#cff; } #footer { height:60px; line-height: 60px; background:#6cf; clear:both; /*保证位置最底部*/ text-align: center; }

效果如下:上述header没有设置背景色,是白的。

技术图片

 (二)改进1

在原有的HTML结构增加header 的图片,nav的5个超链接

    <div id="header">
        <img src="images/banner.jpg" alt="" />    
    </div>
    <div id="nav">
        <a href="#">menu</a>
        <a href="#">party</a>
        <a href="#">join us</a>
        <a href="#">more</a>
        <a href="#">help</a>
    </div>

在CSS也要增加超链接的一些样式, 放在原来的#nav后面。

a:link{
    color: #fff; /*白色*/
    text-decoration: none; 
}
a:visited{
    color: #fff; 
    text-decoration: none;
}
a:hover{
    color: yellow; /*鼠标悬停时变黄色*/
    text-decoration: none;
}
a:active{
    color: #fff;
    text-decoration: none;
}

上述的a 的四种状态都是不添加下划线的,可以简化代码

a{
    text-decoration: none; 
}
a:link{
    color: #fff; /*白色*/
}
a:visited{
    color: #fff; 
}
a:hover{
    color: yellow; /*鼠标悬停时变黄色*/
}
a:active{
    color: #fff;
}

但是万一别的地方的超链接想要有下划线,这种方法不可行。最好用嵌套 #nav  a{ text-decoration:none;}

预览效果发现 nav的文字没有居中显示,在#nav样式中增加 line-height:30 px  , 与 其height一致就行了。 

 (三)改进2

在content 下面有四行,每一行的左侧是图片,右侧是文字。文字部分又分为标题和内容。

在sublime 中可以输入  .subcont*4>img+ .subtext> h2+p 进行拓展。

        <div class="subcont">              
            <img src="images/Latte.jpg" alt="">
            <div class="subtext">
                <h2>拿铁Caffè Latte</h2>
                <p>这是一种传统的经典饮料——浓缩咖啡调入热牛奶,其上覆盖一层轻盈的奶沫。
<br>品尝此款咖啡时,您可以选择特别加入某种口味(如香草,焦糖或杏仁口味)的糖浆。</p> </div> </div>

这样输入四次,把四行内容都添加上。

上述CSS的补充如下

.subcont{
    width: 570px;
    margin: 10px auto;    
    clear: both;
}
.subcont img{
    margin: 5px;
    padding: 5px;
    float: left;
    border: 1px dashed #000; /*黑色虚线*/
}
.subcont .subtext{
    width: 60%;
    float: left;
    margin: 5px;
}
.subcont h2{
    margin: 5px;
}
.subcont p{    
    font:16px/2em 微软雅黑;  /*2倍行 高*/
}

content的内容都有了,那么可以把CSS样式中#content{} 的height去掉了。进一步,也可以把main{}的height去掉。

(四)改进3

现在在header部分的右下角增加一个图片的列表,需用用到层定位。

在HTML的header部分增加一个icon-list , 添加四张图片。

<div id="icon-list">
         <img src="images/1.bmp">
         <img src="images/2.bmp">
         <img src="images/3.bmp">
         <img src="images/4.bmp">
</div>

预览效果发现四个小图片由于没有了位置,位置在header下方了,如何使用层定位改变?

(1)在CSS样式中,#header增加 position :relative;

(2)增加子元素#icon-list 的样式

#icon-list{
    position:absolute;/*子层定位*/
    top:170px; /*距离父元素上方170px*/
    right: 30px;
    width: 130px;
    height: 30px;    
    font-size: 0px; /*去掉图片直接默认的空隙*/
}
#icon-list img{
    margin-left:5px;
}

接下来,在窗口的左侧添加一个图片作为“广告”

这个固定定位与main 无关,可以放在HTML的外面,结构中增加

<div id="l-fix">
      <img src="images/Latte.jpg">   
</div>

设置这一部分的样式

#l-fix{
    position: fixed;
    top:100px;
    left:5px;
}

(五)改变4

1. 在aside中添加照片墙。

四张照片放在圆角边框里,还有阴影的效果。每个图片的倾斜程度不同。

在aside下面增加 imglist, 里面加入四个照片。每个照片放在div中,因为要设置圆角的边框等效果。四个照片有共同的样式 pol , 也有不同的样式,rotate-left,rotate-right.

技术图片

 

 CSS中增加样式

#imglist{
    width: 130px;
    margin: 0 auto;         
}
.pol
{
    width:85px;        
    padding: 10px;
    background-color: #eee;
    border:1px solid #BFBFBF;
    box-shadow:2px 2px 4px #aaa; /*盒子阴影*/
    border-radius: 5px; /*圆角边框*/
}

.rotate_left
{
    -ms-transform:rotate(7deg); /* IE 9 */
    -moz-transform:rotate(7deg); /* Firefox */
    -webkit-transform:rotate(7deg); /* Safari and Chrome */
    -o-transform:rotate(7deg); /* Opera */
    transform:rotate(7deg);  /*顺时针效果*/
}

.rotate_right
{
    -ms-transform:rotate(-8deg); /* IE 9 */
    -moz-transform:rotate(-8deg); /* Firefox */
    -webkit-transform:rotate(-8deg); /* Safari and Chrome */
    -o-transform:rotate(-8deg); /* Opera */
    transform:rotate(-8deg);
}
#imglist img{
    height: 95px;
    width: 85px;
    margin: 0 auto;
    font-size: 0;
}
#imglist img:hover{
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

 还有table 的HTML为

<h2>MENU</h2>
        <table >
          <tr>
              <th ></th>
            <th >Latte</th>
            <th >Cappuccino</th>
            <th >Mocha</th>
            <th >Espresso</th>
          </tr>
          <tr>
            <th scope="row"  >LARGE</th>
            <td>35</td>
            <td>35</td>
            <td>35</td>
            <td>30</td>
          </tr>
          <tr>
            <th scope="row"  >MEDIUM</th>
            <td>30</td>
            <td>30</td>
            <td>30</td>
            <td >25</td>
          </tr>
          <tr>
            <th scope="row"  >SMALL</th>
            <td>25</td>
            <td>25</td>
            <td>25</td>
            <td>20</td>
          </tr>
        </table>

这里的table没有特别的CSS样式。

Scope属性同时定义了行的表头和列的表头:
col: 列表头
row: 行表头

web基础(6): CSS综合实例-咖啡网页设计

标签:这一   倾斜   das   使用   nbsp   没有   visit   osi   width   

原文地址:https://www.cnblogs.com/xuying-fall/p/12288639.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!