顶部栏目样式设计

最新推荐文章于 2022-07-01 20:34:46 发布
最新推荐文章于 2022-07-01 20:34:46 发布
阅读量292 收藏
点赞数
分类专栏： Html 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tjhfsghbjknjdy/article/details/107866314
版权

代码：

shopping.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/shopping.css">
</head>
<body>
<div class="shoping-page" id="shopping">
    <div style="height:44px;"></div>
    <div class="shopping-item">
        <div class="goods-item">
            <div class="good-list">
                <div class="store-goods" style="width: 100%">
                    <div class="shopping-check" onclick="check_goods(this)">
                        <input type="checkbox" class="checkbox_css" name="id">
                    </div>
                    <div class="good-property">
                         <div class="goods-size">停车场：P24241</div>
                    <div class="goods-size"><i style="width:4px;height:4px;border-radius:50%;background-color:#555555;display: inline-block;"></i>&nbsp;&nbsp;&nbsp;车牌号码：京N2B945 </div>
                    <div class="goods-size"><i style="width:4px;height:4px;border-radius:50%;background-color:#555555;display: inline-block;"></i>&nbsp;&nbsp;&nbsp;计费时长：1h30min</div>
                    <div class="goods-size"><i style="width:4px;height:4px;border-radius:50%;background-color:red;display: inline-block;"></i>&nbsp;&nbsp;&nbsp;支付金额：
                        <div class="goods-price" style="display: inline-block; color:red;float: right;">￥<span style="color:red">198</span></div>
                    </div> 
                    <div class="goods-size">停车开始时间：2020-8-4 11：04：31</div>
                    <div class="goods-size">停车结束时间：2020-8-4 12：35：04</div>                      
                    </div>
                </div>
            </div>          
        </div>
    </div>
     <div class="shopping-item">
        <div class="goods-item">
            <div class="good-list">
                <div class="store-goods">
                    <div class="shopping-check" onclick="check_goods(this)">
                        <input type="checkbox" class="checkbox_css" name="id">
                    </div>
                    <div class="good-property">
                    <div class="goods-size">停车场：P24241</div>
                    <div class="goods-size"><i style="width:4px;height:4px;border-radius:50%;background-color:#555555;display: inline-block;"></i>&nbsp;&nbsp;&nbsp;车牌号码：京N2B945 </div>
                    <div class="goods-size"><i style="width:4px;height:4px;border-radius:50%;background-color:#555555;display: inline-block;"></i>&nbsp;&nbsp;&nbsp;计费时长：1h30min</div>
                    <div class="goods-size"><i style="width:4px;height:4px;border-radius:50%;background-color:red;display: inline-block;"></i>&nbsp;&nbsp;&nbsp;支付金额： 
                        <div class="goods-price" style="display: inline-block; color:red;float: right;">￥<span style="color:red">198</span></div>
                    </div>                      
                    <div class="goods-size">停车开始时间：2020-8-4 11：04：31</div>
                    <div class="goods-size">停车结束时间：2020-8-4 12：35：04</div>                          
                    </div>
                </div>
            </div>          
        </div>
    </div>
    <div class="shopping-account" >
            <div class="shopping-check" onclick="checkAll(this)" id="check_all">
                <input type="checkbox" class="checkbox_css">
            </div>
            全选
        <div class="shopping-count">合计:
            <div class="count-color">￥<span id="total">0</span></div>
            <div class="total" onclick="Count()">支付 （<span id="count">0</span>）</div>
        </div>
    </div>

</div>
    <div class="footer-icon border-top">
        <div class="buy"><a href="personal-center.html">
            <div>本次缴费</div>
        </a>
        </div>
        <div class="stage icon-active"><a href="shopping.html">
            <div>历史欠费</div> 
        </a></div>
    </div>
</body>
<script src="js/shopping.js"></script>
</html>

personal-center.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>本次缴费</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/details.css">

</head>
<body>
<div class="index-page" id="div1">
    <div class="personal-content">
        <div class="content-next">          
        </div>
    </div>
        <div style="height:10px;"></div>
    <div class="personal-ul" style="margin:5px;">
        <ul>
            <li>
                <span style="width: 100%;font-size: 16px;margin-left: 6%">
                <div>停车场：P24241</div>
                <div><i style="width:4px;height:4px;border-radius:50%;background-color:#555555;display: inline-block;"></i>&nbsp;&nbsp;&nbsp;车牌号码：京N2B945</div>
                    <div><i style="width:4px;height:4px;border-radius:50%;background-color:#555555;display: inline-block;"></i>&nbsp;&nbsp;&nbsp;计费时长：1h30min</div>
                    <div class="goods-size"><i style="width:4px;height:4px;border-radius:50%;background-color:#555555;display: inline-block;"></i>&nbsp;&nbsp;&nbsp;支付金额： 
                        <div class="goods-price" style="display: inline-block;">￥<span>198</span></div>
                    </div>
                </span>
            </li>
            <li>
                <span style="width: 100%;font-size: 16px;margin-left: 6%">
                      <div class="goods-size">停车开始时间：2020-8-4 11：04：31</div>
                    <div class="goods-size">停车结束时间：2020-8-4 12：35：04</div>
                </span>
            </li>
            <li>
                <span style="width: 100%;font-size: 16px;margin-left: 6%;height: 100%">
                    <div class="goods-size">
                道路泊位停车的请于缴费后5分钟内驶离，公共停车场停车的请于缴费后15分钟内驶离，否则将重新计费产生费用。
            </div>
            <div style="margin:15% 30%;color: #555555;">
                总支付金额
                 <div style="color:red;margin: 10px 10px;">￥<span>198</span></div>
            </div>
            <div>
                <button type="button" style="width: 200px;height: 40px;background-color: #0066FF;border-radius: 4px;color: #fff;margin:0 15% 100%" id="btn1">确认支付</button>
            </div>
        </span>
            </li>
        </ul>
    </div>
    <div class="footer-icon border-top">
        <div class="buy icon-active"><a href="personal-center.html">
            <div>本次缴费</div>
        </a>
        </div>
        <div class="stage"><a href="shopping.html">
            <div>历史欠费</div>
        </a></div>
    </div>
</div>
</body>
</html>

common.css

@charset "utf-8";
*{
    margin:0; padding:0;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0;  font-family: "微软雅黑"; }
fieldset, img { border: 0; }
ul, ol, li { list-style: none; font-family:'Microsoft YaHei'; }

/* remember to define focus styles! */
:focus { outline: 0; }
address, caption, cite, code, dfn, em, strong, th, var, optgroup { font-style: normal; font-weight: normal; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
abbr, acronym { border: 0; font-variant: normal; }
input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; background-color: #fff; border: none;}
code, kbd, samp, tt { font-size: 100%; }
a{text-decoration:none;}
a:hover{
    text-decoration: none;
}
/*@purpose To enable resizing for IE */
/*@branch For IE6-Win, IE7-Win */
input, button, textarea{ *font-size: 100%;}
ol, ul { list-style: none; }

/* tables still need 'cellspacing="0"' in the markup */
table,tr,td { border-collapse: collapse; border-spacing: 0; margin:0;padding:0;}
caption, th { text-align: left; }
sup, sub { font-size: 100%; vertical-align: baseline; }

/* remember to highlight anchors and inserts somehow! */
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

/**Common Css**/
.fr { float: right; *display: inline;}
.fl { float: left; *display: inline;}
/*文本超出显示省略号*/
.ehn, .otw, .tow { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
/*清除浮动*/
.clearfix { clear: both; *zoom:1;}
.clearfix:after { display: block; clear: both; content: "\0020"; visibility: hidden; height: 0; }
.border { border: 1px solid #e8e8e8 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border {  border: 0.5px solid #e8e8e8 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border {  border: 0.333333px solid #e8e8e8 }
}
.border-top { border-top: 1px solid #e8e8e8 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border-top  {  border-top: 0.5px solid #e8e8e8 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border-top  {  border-top: 0.333333px solid #e8e8e8 }
}
.border-bottom { border-bottom: 1px solid #e8e8e8 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border-bottom  {  border-bottom: 0.5px solid #e8e8e8 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border-bottom  {  border-bottom: 0.333333px solid #e8e8e8 }
}
.border-right { border-right: 1px solid #e8e8e8 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border-right  {  border-right: 0.5px solid #e8e8e8 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border-top  {  border-right: 0.333333px solid #e8e8e8 }
}
.icon-active a{
  color: darkred!important;
}
 .footer-icon {
    display: flex;
    justify-content: space-around;
    position: fixed;
    width: 100%;
    z-index: 101;
    padding: 8px 0 5px 0;
    top: 0px;
    height: 30px;
    background: #ffffff;
}

 .footer-icon a {
    color: #000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 16px;
}
/*清除浮动代码*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
.right {
    right: 0;
    top: 5px;
}

details.css

.index-page .swiper-slide img {
    width: 100%;
}

.swiper-pagination-bullet-active {
    background: rgba(0, 0, 0, 0.5);
}

.details-footer {
    position: fixed;
    background: #ffffff;
    width: 98%;
    padding: 0 0 0 2%;
    display: flex;
    justify-content: space-between;
    bottom: 0;
}

.detail-icon {
    display: flex;
    align-items: center;
}

.detail-icon span {
    margin: 0 5px;
}

.detail-icon a {
    color: #000000;
    text-align: center;
}

.detail-group {
    display: flex;
    align-items: center;
}

.detail-btn {
    background: #999999;
    color: #ffffff;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
}

.detail-btn1 {
    background: darkred;
    color: #ffffff;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;

}

.detail-tit {
    background: #ffffff;
    text-align: center;
    height: 40px;
    line-height: 40px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
}

.goods-name {
    font-size: 15px;
    width: 96%;
    padding: 0 3%;
}

.detile_next {
    display: flex;
    background: #Fff;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
}

.detile_next .next_list {
    color: #9a9a9a;
    flex: 1;
    text-align: center;
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: center;
}

.detile_next .red_quan {
    width: 10px;
    height: 10px;
    margin-right: 2px;
    border-radius: 10px;
    background: darkred;
}

.good-price {
    font-size: 16px;
    width: 96%;
    padding: 5px 3% 10px 3%;
    color: red;
}

.detail-header {
    background: #ffffff;
}

.detitle_tab ul {
    display: flex;
    background: #fff;
}

.detile_centent {
    width: 100%;
    padding-bottom: 100px;
}

.detile_centent img {
    width: 100%;
}

.tabulous_active {
    color: darkred !important;
    font-weight: bold;
}

.part {
    display: none;
    background: #ffffff;
    padding: 20px 10px;
}

.detitle_tab ul li {
    display: flex;
    flex: 1;
    height: 35px;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #000;
    border-bottom: 1px solid #eaeaea;
}

/*个人中心的样式*/
.personal-header {
    margin: 10px 0;
    background: #ffffff;
    padding: 10px 2%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.photo {
    width: 60px;
    height: 60px;
    border-radius: 60px;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    font-size: 12px;
}

.personal-content {
    background: #ffffff;

}

.content-top {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eaeaea;
    padding: 10px 2%;
}

.content-next {
    display: flex;
    justify-content: space-around;
    padding: 20px 0;
}

.content-next div {
    text-align: center;
}

.personal-ul {
    margin-top: 2px;
    background: #ffffff;
}

.personal-ul li {
    padding: 10px 3%;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.personal-ul li + li {
    border-top: 1px solid #eaeaea;
}

/*//下单页面*/
.u_header {
    background: #ffffff;
    text-align: center;
    height: 40px;
    line-height: 40px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
}

.write_word {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fffdea;
    padding: 10px 3%;
}
.write_word  img{
    width: 20px;
}
.write_word  div{
    display: flex;
    align-items: center;
}
.loc_item1{
    width: 90%;
    background: #ffffff;
    margin: 10px auto;
    border-radius: 5px;
    padding: 10px 2%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.loc_first{
    display: flex;
    align-items: center;
}
.phone{
    color: #999999;
    margin-left: 10px;
}
.loc_address{
    margin-top: 8px;
}
.address{
    display: flex;
    justify-content: space-between;
}
.detile_picture img{
 width: 80px;
}
.detile_header {
    display: flex;
    justify-content: space-between;
    background: #ffffff;
    padding: 10px 2%;
}
.write_name{
    margin-left: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.write_name .detile_title {
    font-size: 16px;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.price_left{
    color: #ff0000;
}
.tranform_fee {
    margin-top: 10px;
    background: #fff;
}
.tranform_fee .good_desc {
    display: flex;
    padding: 0 20px;
    height: 45px;
    line-height: 45px;
    justify-content: space-between;
}
.tranform_fee .desc_left {
    display: flex;
    align-items: center;
    justify-content: center;
}
.tranform_fee .add {
    background: #EFEFEF;
    height: 20px;
    width: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999999;
    font-size: 18px;
}
.tranform_fee .num {
    margin: 0 5px;
}
.tranform_fee .num input {
    border: 0;
    width: 20px;
    text-align: center;
}
.tranform_fee .good_desc + .good_desc {
    border-top: 1px solid #efefef;
}
.detile_footer {
    display: flex;
    position: fixed;
    bottom: 0px;
    width: 100%;
}
.detile_footer .footer_left {
    flex: 1;
    display: flex;
    height: 50px;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    background: #fff;
}
.detile_footer .footer_left .footer_title {
    color: #9a9a9a;
}
.detile_footer .footer_left .footer_price {
    color: #ff0000;
    font-size: 18px;
}
.detile_footer .footer_right {
    flex: 1;
    display: flex;
    height: 50px;
    justify-content: center;
    align-items: center;
    color: #fff;
    background: darkred;
    font-size: 18px;
}

shopping.css

body {
    background: #f4f4f4;
}
.shoping-page{
    padding-bottom: 100px;
}
.shoping-page .shopping-name{
   display: flex;
}
.shoping-page .shopping-item {
    width: 90%;
    margin: 10px auto;
    padding: 10px;
    background: #ffffff;
    border-radius: 5px;
    align-items: center;
}

.shoping-page .shopping-item img {
    width: 80px;
    height: 80px;
    border-radius: 5px;
    margin-right: 5px;
}

.shoping-page .goods-size {
    margin-top: 5px;
}

.shoping-page .goods-size span {
    background: #f4f4f4;
    color: #999999;
}

.shoping-page .shopping-select {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("../img/select.png") no-repeat center;
    background-size: 100% 100%;
    margin-right: 10px;
}

.shoping-page .good-property {
    flex: 2;
}

.shoping-page .goods-footer {
    display: flex;
    align-items: center;
    margin-top: 10px;
    justify-content: space-between;
}
.header_box {
    height: 44px;
    position: fixed;
    width: 94%;
    padding: 0 3%;
    line-height: 44px;
    background: #ffffff;
    top: 0;
    z-index: 999999;
}
.box1{
    text-align: center;width: 60%;margin: 0 auto
}
/*.box2{
    text-align: center;
    width: 20%;
    position: absolute;
    display: inline;
    top: 0;
    right: -20px;
}*/
.shoping-page  .shopping-box{
    position: relative;
}
.shoping-page .goods-count span {
    border: 1px solid #f4f4f4;
    padding: 2px 10px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
.shoping-page .good-list{
   display: flex;
    position: relative;
}
.shoping-page .goods-count span + span {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
.shoping-page .store-goods{
    width: 100%;
    display: flex;
    align-items: center;
    background: #ffffff;
    z-index: 1;
    margin: 5px 0;
    transform: translate3d(0px,0px,0px);
    /*规定应用过渡的CSS属性*/
    transition-property:transform;
    /*规定应用过渡所花费的时间*/
    transition-duration: 0s;
    /*规定过渡效果从何开始，默认是0*/
    transition-delay: 0;
    /*规定过渡的时间曲线*/
    transition-timing-function: linear;
}
.subListTitle {
    position: absolute;
    line-height: 89px;
}
.right > .subRight {
    display: block;
    float: left;
    padding: 0 12px;
}

.collection {
    background-color: #c7c7cc;
    color: white;
}
.update {
    background-color: #ffc900;
    color: white;
}
.delete {
    background-color: #ef473a;
    color: white;
}
.shoping-page .shopping-check {
    width: 20px;
    height: 20px;
    /*background: url("../img/pay_selected.png") no-repeat center;*/
    background: url("../img/select.png") no-repeat center;
    background-size: 100% 100%;
    margin-right: 10px;
}

.shoping-page .checkbox_css {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    opacity: 0;
    margin-right: 10px;
}

.shoping-page .goods-count input {
    border-top: 1px solid #f4f4f4;
    border-bottom: 1px solid #f4f4f4;
    width: 40px;
    padding: 2px 0;
    text-align: center;
}

.shoping-page .goods-price {
    font-weight: bold;
    color: #ff0000;
}

.shoping-page .footer-icon {
    background: #f4f4f4;
}

.shoping-page .shopping-account {
    background: #ffffff;
    position: fixed;
    bottom: 0px;
    width: 94%;
    height: 46.5px;
    display: flex;
    padding: 0 3%;
    justify-content: space-between;
    align-items: center;
    z-index: 99;
}

.shoping-page .shopping-count {
    font-size: 16px;
    margin-right: 5px;
}

.shoping-page .shopping-account div {
    display: flex;
    align-items: center;
}

.count-color {
    color: darkred;
}

.shoping-page .total {
    background: darkred;
    margin-left: 10px;
    padding: 5px 10px;
    border-radius: 20px;
    color: #ffffff;
}

style.css


.top-header {
    background-color: #f60;
    width: 100%;
    overflow: hidden;
    position: relative;
    display: table;
}

.top-header h3 {
    font-size: 1.6em;
    padding: 1em;
    margin: 0 30%;
    white-space: nowrap;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    color: #fff;
    font-weight: normal;
    display: table-cell;
}

.top-header a:first-child {
    width: 14%;
    display: table-cell;
    padding: 0 4%;
    vertical-align: middle;
}

.top-header a:last-child {
    width: 14%;
    display: table-cell;
    padding: 0 4%;
    vertical-align: middle;
}

.top-header img {
    width: 100%;
    display: block;
}

body {
    background-color: #f2f2f2;
}

/*瀑布流开始*/
.wall {
    display: block;
    position: relative;
}

.wall-column {
    display: block;
    position: relative;
    width: 50%;
    float: left;
    padding: 0 2%;
    box-sizing: border-box;
    margin-bottom: 50px;
}

.article {
    display: block;
    margin: 0 0 8% 0;
    /*padding: 5%;*/
    background: white;
    border-radius: 3px;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    transition: all 100;
    overflow: hidden;
    position: relative;
}

.article:hover {
    transform: scale(1.01);
}

.article img {
    display: block;
    width: 100%;
    margin: 0 0 5% 0;
}

.article a {
    color: #666;
}

.article p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 70%;
    padding:0 5%;
    font-size: 1em;
    line-height: 1.5;
}

.article small {
    font-size: 1em;
    color: #ff0000;
    line-height: 1.5;
    padding:0 5% 5% 5%;
    display: inline-block;
}

.article input {
    width: 20%;
    padding: 0.4em;
    border-radius: 0.4em;
    font-size: 0.8em;
    z-index: 100;
    background-color: #f60;
    border: none;
    position: absolute;
    bottom: 3%;
    right: 5%;
    color: #fff;
    box-shadow: 0 0 7px #d7d7d7;
}

/*瀑布流结束*/
.wrapper h3 {
    text-align: center;
    margin: 0 20%;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: normal;
    color: #333;
    overflow: hidden;
    font-size: 1.5em;
    padding: 0.7em 0;
}

.wrapper h4 {
    width: 90%;
    margin: 0 5%;
    text-align: justify;
    font-weight: normal;
    color: #999;
    font-size: 1.2em;
    margin-bottom: 3%;
    line-height: 1.5;
}

效果：

 

 

qqandpinecone
关注
专栏目录
新闻栏目设计css 样式
08-11
新闻栏目设计css 样式 新闻标题类型新闻发布最立项的选择
CSS设计栏目
petterp的博客
08-22 954
&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;css设计栏目&lt;/title&gt; &lt;style type="text/css"&gt; body{ /*页面初始化*/ background-co
栏目当前样式 织梦
dianchu1694的博客
09-03 230
<li class="select-list parentDiv"><dl><dt>父类：</dt> <dd><a class="parrentAll" href="{dede:type typeid='1'}[field:typeu...
html栏目样式,改变栏目展示外观样式
weixin_36245958的博客
06-18 416
改变栏目展示外观样式网站栏目的样式有多达十多种预制样式供使用者选择，如：如何修改栏目列表样式：网站后台 - [ 内容 ] - [ 栏目管理 ] - 编辑 - [ 需要改变样式的栏目 ] 栏目 - [ 属性设置 ] ，当前栏目模板；在模板列表里面选择需要的样式。 栏目列表样式说明：栏目产品图片列表样式：list_products.html栏目单页样式：list_page.html栏目时间轴样式：...
班级页面设计——【2-主界面部分】
张小鱼的博客
07-01 1358
期末课程设计，班级页面设计，HTML页面，css，JavaScript
顶部固定、二级栏目之间相互滑动的导航菜单样
06-05
在网页设计中，"顶部固定、二级栏目之间相互滑动的导航菜单样式"是一种常见的交互设计模式，尤其在响应式网站和移动应用中非常流行。这种设计有助于提供清晰的导航结构，使用户能够轻松地在网站或应用的不同部分之间...
顶部固定、二级栏目之间相互滑动的导航菜单
06-04
在网页设计中，一个高效的导航菜单对于用户体验至...总的来说，这种顶部固定、二级栏目滑动的导航菜单设计是现代网页设计中的常见实践，通过结合HTML、CSS和JavaScript，可以创建出交互性强且用户友好的网页导航体验。
jQuery制作顶部浮动导航菜单定位特效加选中当前栏目
11-02
在网页设计中，导航菜单是用户浏览网站时的重要指引，而顶部浮动导航菜单更是常见且实用的设计元素。本文将深入探讨如何使用jQuery技术来创建一个具有浮动效果和锚点导航功能的顶部菜单，并实现当页面滚动到特定内容...
4-3 设计首页的英雄区和栏目导航 - EMOS小程序1
08-04
在微信小程序开发中，英雄区通常是指页面顶部的大型图片展示区域，而栏目导航则是帮助用户快速访问不同内容板块的工具。 首先，我们来关注英雄区的设计。在微信小程序中，实现轮播焦点图可以通过使用`<swiper>`组件...
动易CMS栏目导航分栏问题
09-28
在网站设计中，栏目导航是至关重要的部分，它帮助用户快速找到他们感兴趣的内容。动易CMS（Content Management System）作为一个流行的网站管理平台，其栏目导航功能有时可能会遇到一些挑战。本文将针对描述中提出的...
36种漂亮的CSS3网页按钮Button样式
Alex 的程序园地
02-27 2万+
36种漂亮的CSS3网页按钮Button样式 body{  background: #f5faff; } .demo_con{ width: 960px; margin:40px auto 0; } .button{ width: 140px; line-height: 38px; text-align: center; font-weight: bold; colo
js中两种简单的轮播图
qq_40353662的博客
06-17 272
轮播图1.0——平面轮播 &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&amp;quot;utf-8&amp;quot; /&amp;amp;gt; &amp;amp;lt;title&amp;amp
tab栏目自定义的js代码
sword_chiu的博客
07-08 175
var that; class Tab { constructor(id) { // 获取元素 that = this; this.main = document.querySelector(id); this.add = this.main.querySelector('.tabadd'); // li的父元素 this.ul = this.main.querySelector('.fisrstnav.
CSS定位（position）---创建左侧菜单栏目--二级与三级
知识改变命运，ヾ(◍°∇°◍)ﾉﾞ【求关注】
01-16 467
<!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title>position</title> <style> *{ padding: 0; margin: 0; } .page{ wid...
CSDN分类专栏操作演示
热门推荐
CSDN 官方博客
08-21 13万+
博客专栏与文章分类合并为分类专栏，同时新增二级分类功能。新创建的分类专栏不能超过50个（包含二级），标签不能超过3个。 之前创建超过数量的分类专栏不会自动合并，暂时先保持不变。 新分类专栏管理页面如下，可批量调整文章分类。 ...
CSS手机端顶部标题栏样式（三分天下）
美奇软件开发工作室
12-30 2305
先上一下效果图： html代码： <header> <!--标题--> <div class="title-box"> <a href="./home.html" class="title-left"><i class="iconfont" style="font-size:30px;">&#xe619;</i&...
js当前栏目选中时显示样式
weixin_40431771的博客
08-23 783
&lt;script type="text/javascript"&gt; $(document).ready(function(){ $("a").each(function(){ $this = $(this); if($this[0].href==String(window.location)){ $this.addClass("class");...
CSDN博客如何添加个性化栏目
askunix
08-15 1930
首先放一张效果图：当然你也可以返回我的博客主页查看效果。 我实现的功能（从上到下依次是）： 1、添加GitHub链接、GitHub Pages链接。 2、邮箱展示，点击跳转。 3、权限声明。 4、动态图片。 5、音乐外链（点击实现听音乐）。 自定义步骤： 1、首先在栏目管理中新增一个栏目，名字随便设置。 2、点击编辑，定义内容。 这里的内容其实支持Html语法...
HTML结构与CSS样式：网页设计三剑客
例如，标题（head）、内容区域（content或container）、导航（nav）、侧边栏（sidebar）、栏目（column）等都是HTML元素，用于划分页面的不同部分，如页面的顶部（header）、主体（main）、底部（footer）以及登录条...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值