CSS实验案例03京东频道广场

最新推荐文章于 2023-03-25 18:34:16 发布

Jatine

最新推荐文章于 2023-03-25 18:34:16 发布

阅读量660

点赞数 2

分类专栏：前端实验案例文章标签： css css3 前端

本文链接：https://blog.csdn.net/asdfghjkl_zth/article/details/123006331

版权

文章目录

CSS实验案例03京东频道广场
- 3.1CSS
- 3.2HTML

CSS实验案例03京东频道广场

3.1CSS

.channels {
   
    /*			主体框架*/
    width: 1920px;
    height: 825px;
    overflow: hidden;
}

.floorhd {
   
    /*			主标题栏*/
    height: 65px;
    background: #F4F4F4;
}

.grid_c1 {
   
    /*			限宽栏*/
    margin: 0 auto;
    width: 1205px;
}

.floorhd_tit {
   
    /*			标题栏*/
    position: relative;
    width: 200px;
    height: 45px;
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    line-height: 45px;
    padding: 0 30px;
    margin: 0 auto 20px;
    overflow: hidden;
    color: #333;
}

.channels .slider {
   
    /*			大板块*/
    position: relative;
}

.channels .slider_list {
   
    /*			主板快*/
    width: 1205px;
    height: 800px;
    margin: 0 auto;
    overflow: hidden;
}

.channels_block_1 {
   
    /*			物品推荐分栏*/
    float: left;
    height: 378px;
    width: 300px;
}

.channels_block_2 {
   
    /*			物品推荐1/2分栏*/
    float: left;
    background-color: #F4F4F4;
    height: 188px;
    width: 300px;
}

.channels_block_2_content {
   
    /*			物品推荐1/2分栏*/
    float: left;
    background-color: white;
    height: 182px;
    width: 292px;
}

.channels_block_title {
   
    /*			物品推荐1/2分栏标题*/
    display: block;
    height: 30px;
    margin-left: 30px;
    margin-right: 10px;
    padding-top: 17px;
    padding-bottom: 13px;
    line-height: 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.channels_block_title_main {
   
    /*			主标题*/
    font-size: 22px;
    font-weight: 700;
    color: #333;
}

.channels_block_title_aside {
   
    /*			副标题*/
    font-size: 14px;
    color: #999;
    margin-left: 5px;
}

.channels_block_imgs {
   
    /*			两张图片盒子*/
    font-size: 0;
    line-height: 0;
}

.channels_block_link {
   
    /*			单张图片盒子*/
    position: relative;
    padding-left: 23.5px;
    display: inline-block;
}

.channels_block_link_left {
   
    /*			左侧图片盒子*/
    width: 100px;
    height: 100px;
    float: left;
    margin-right: 20px;
}

.channels_block_link_right {
   
    /*			右侧图片盒子*/
    width: 100px;
    height: 100px;
    float: right;
    margin-right: 20px;
}

.slider_list_bottom {
   
    /*			将主板块分成上下两个板块*/
    height: 378px;
}

body {
   
    background: #F4F4F4;
}

img {
   
    transition: all 0.3s;
}

img:hover {
   
    opacity: 0.7;
    transition: all 0.4s;
}

a {
   
    text-decoration: none
}

.elevator_fix {
   
    position: fixed;
    top: 75px;
}

.elevator {
   
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: 615px;
}

li {
   
    list-style: none;
}

.elevator_lk {
   
    position: relative;
    display: block;
    width: 28px;
    height: 38px;
    line-height: 19px;
    font-size: 14px;
    color: #333;
    padding: 10px 16px;
    background: #fff;
}

.elevator_totop {
   
    display: block;
    height: 50px;
    padding-top: 10px;
    color: #e1251b;
    background: #fff;
    text-align: center;
}

.elevator_totop_txt {
   
    display: block;
    height: 18px;
    line-height: 18px;
    font-size: 14px;
}

3.2HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实验3</title>
</head>
<link href="css/style_JD.css" rel="stylesheet">
<body>
<div class="channels">
    <div class="floorhd">
        <div class="grid_c1 floorhd_inner">
            <h3 class="floorhd_tit"><img src="lefter.png">频道广场<img src="righter.png"></h3>
        </div>
    </div>
    <div class="slider">
        <div class="slider_list">
            <div class="channels_block_1"><a href="https://channel.jd.com/furniture.html"> <img src="jiaju.png"></a>
            </div>
            <div class="channels_block_1"><a href="https://book.jd.com/"> <img src="tushu.png"></a></div>
            <div class="channels_block_2">
                <div class

最低0.47元/天解锁文章

Jatine

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
CSS实验案例03京东频道广场

文章目录CSS实验案例03京东频道广场3.1CSS3.2HTMLCSS实验案例03京东频道广场3.1CSS.channels { /* 主体框架*/ width: 1920px; height: 825px; overflow: hidden;}.floorhd { /* 主标题栏*/ height: 65px; background: #F4F4F4;}.grid_c1 { /* 限宽栏*/ margin
复制链接

扫一扫

专栏目录