寒假：HTML

最新推荐文章于 2024-02-01 23:11:59 发布

Foog。青陵

最新推荐文章于 2024-02-01 23:11:59 发布

阅读量98

点赞数

设置文本阴影的语法：text-shadow；color X轴位移（X-offset） Y轴位移（Y-offse t）模糊半径（blur-radius）
1
box-shadow：inset x-offset y-offset blur-radius color：

inset：阴影类型，可设值，如果不设值，默认的方式为外阴影；如果设置了inset表示是内阴影
x-offset：X轴位移，用来指定阴影水平位移量，其值可以是正值，也可以是负值，如果为正值，阴影在对象的右边，如果为负值，其阴影在对象的左边
Y-offset：Y轴位移，用来指定阴影水平位移量，其值可以是正值，也可以是负值，如果为正值，阴影在对象的底部，如果为负值，其阴影在对象的顶部
blur-radius：阴影模糊半径，代表阴影向外模糊的模糊范围。值越大阴影向外模糊的范围越大，阴影的边缘就越模糊。这个值只能是正值，如果为0；表示不具有模糊效果，是可选值
color：阴影颜色，定义绘制阴影时所使用的颜色，可以说十六进制颜色

背景属性：
背景颜色有（background-color）和背景图像（background-image）
【background-color】在CSS中，使用background-color属性设置字体，

,列表等网页元素的背景颜色。背景色值的表示方法与color的表示方法一样，也是用十六进制的方法表示。它有一个特殊值——transparent，即透明，是background-color属性的默认值。如：background-color：#333（外层颜色）#444（内层颜色）
【background-image】在网页里设置背景图像通常会与背景重复（background-repeat）方式和背景定位（background-position）两个属性一起使用
【background-image】属性设置背景图像的方式为background-image：url（图片路径）
【background-repeat】
1：repeat：沿水平和垂直两个方向平铺
2：no-repeat：不平铺，即背景图像只显示一次
3：repeat-x:只沿水平方向平铺
4：repeat-Y只沿垂直方向平铺

background-position属性相对应的取值
Xpos Ypos

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>新东方顶部导航菜单</title>
</head>
<style>
    body {
        margin:0;
        font:12px Arial, Helvetica, sans-serif, "å®‹ä½“";
    }
    a {
        text-decoration:none;
        color:#656565;
    }
    a:hover {
        text-decoration:underline;
    }
    ul {
        margin:0;
        padding:0;
    }
    li {
        list-style:none;
    }
    #wrap {
        width:600px;
        position:relative;
    }
    #head {
        width:100%;
        background:url(../image/top_bg.gif) 0 0 repeat-x;
        height:27px;
        overflow:hidden;
    }
    .logo {
        background:url(../image/logo.gif) 10px 0 no-repeat;
        width:100px;
        height:27px;
        float:left;
    }
    .topnav {
        float:right;
    }
    .topnav ul {
        margin:0;
        padding:0;
    }
    .topnav li {
        float:left;
        list-style:none;
        border-right:1px solid #d3d3d3;
        padding:0 15px;
        margin-top:6px;
    }
    .topnav li.select_item {
        background:url(../image/open_icon.gif) right 3px no-repeat;
        border:none;
    }
    .submenu {
        position:absolute;
        top:20px;
        right:30px;
        padding:5px 10px;
        border:1px solid #bfbfbf;
        width:200px;
        background-color:#fff;
    }
    .submenu ul {
        border-bottom:1px solid #e8e8e8;
        overflow:hidden;
        padding:8px 0;
    }
    .submenu ul.last {
        border-bottom:none;
    }
    .submenu li {
        float:left;
        margin:0 8px;
        line-height:22px;
    }
    .submenu li a {
        color:#878787;
    }

</style>
<body>
<div id="wrap">
    <div id="head">
        <div class="logo"></div>
        <div class="topnav">
            <ul>
                <li><a href="#">购物车</a></li>
                <li><a href="#">优惠券</a></li>
                <li><a href="#">快速注卡</a></li>
                <li><a href="#">各地购课</a></li>
                <li><a href="#">手机报</a></li>
                <li class="select_item"><a href="#">网站导航</a></li>
                <li></li>
            </ul>
        </div>
        <div class="submenu">
            <ul>
                <li><a href="#">托福</a></li>
                <li><a href="#">雅思</a></li>
                <li><a href="#">考研</a></li>
                <li><a href="#">职称英语</a></li>
                <li><a href="#">初中</a></li>
                <li><a href="#">日语</a></li>
            </ul>
            <ul>
                <li><a href="#">网络课堂</a></li>
                <li><a href="#">资讯中心</a></li>
                <li><a href="#">知识堂</a></li>
                <li><a href="#">大师讲坛</a></li>
                <li><a href="#">学习论坛</a></li>
                <li><a href="#">学词</a></li>
                <li><a href="#">考研搜校</a></li>
            </ul>
            <ul class="last">
                <li><a href="#">M-Zone</a></li>
                <li><a href="#">手机报</a></li>
                <li><a href="#">时时英语</a></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .clear:after {
            content: '';
            display: block;
            clear: both;
        }

        .box {
            width: 280px;
            border: 1px solid #aacbee;
            border-radius: 8px;
            margin: 40px auto;
            padding: 10px;
            box-sizing: border-box;
        }

        .BBS_head {
            height: 40px;
            line-height: 40px;
        }

        .BBS_head h3 {
            float: left;
            font-size: 16px;
            padding-left: 20px;
        }

        .BBS_head h3 span {
            color: #d80000;
            padding-right: 6px;
        }

        .BBS_head a {
            float: right;
        }

        .shop_today_min li {
            padding: 0 10px 6px;
        }

        .shop_today_min_pic {
            float: left;
            position: relative;
        }
        .posit{
            position: absolute;
            right: -10px;
            top: -10px;
        }
        .shop_today_min_list {
            float: right;
        }

        .shop_today_min_list {
            float: right;
            font-size: 12px;
            margin-right: 10px;
        }

        .shop_today_min_list h5 {
            font-size: 12px;
            line-height: 28px;
        }

        .shop_today_min_list h5 a {
            color: #b80000;
        }

        .shop_today_min_list p {
            line-height: 18px;
            color: #666;
        }

        .shop_today_min_list p span {
            color: #999;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="BBS_head clear">
        <h3><span>SHOP</span>今日推荐</h3>
        <a href="#"><img src="image/more.gif" alt="more"/></a>
    </div>
    <ul class="shop_today_min">
        <li class="clear">
            <div class="shop_today_min_pic">
                <a href="#"><img src="image/img9.gif" alt="鸡腿"/></a>
                <img class="posit" src="image/shen.png" alt=""/>
            </div>
            <div class="shop_today_min_list">
                <h5><a href="#">汉来国际美食百货</a></h5>
                <p><span>口味：</span>创意中餐</p>
                <p><span>区域：</span>朝阳/CBD</p>
            </div>
        </li>
        <li class="clear">

            <div class="shop_today_min_pic">
                <a href="#"><img src="image/img7.gif" alt="鸡腿"/></a>
            </div>
            <div class="shop_today_min_list">
                <h5><a href="#">汉来国际美食百货</a></h5>
                <p><span>口味：</span>创意中餐</p>
                <p><span>区域：</span>朝阳/CBD</p>
            </div>
        </li>
        <li class="clear">
            <div class="shop_today_min_pic">
                <a href="#"><img src="image/img8.gif" alt="鸡腿"/></a>
            </div>
            <div class="shop_today_min_list">
                <h5><a href="#">汉来国际美食百货</a></h5>
                <p><span>口味：</span>创意中餐</p>
                <p><span>区域：</span>朝阳/CBD</p>
            </div>
        </li>
        <li class="clear no_bortem">
            <div class="shop_today_min_pic">
                <a href="#"><img src="image/img7.gif" alt="鸡腿"/></a>
            </div>
            <div class="shop_today_min_list">
                <h5><a href="#">汉来国际美食百货</a></h5>
                <p><span>口味：</span>创意中餐</p>
                <p><span>区域：</span>朝阳/CBD</p>
            </div>
        </li>
    </ul>
</div>
</div>
</body>
</html>