首页 > 其他分享 >css

css

时间：2023-01-09 02:33:12浏览次数：50  
标签：goods color height width background xtx css

/* 版心的公共类 */
.container {
width: 1240px;
margin: 0 auto;
}

/* ---------------快捷菜单模块：xtx-shortcut */
.xtx-shortcut {
height: 52px;
background-color: #333333;
}

.xtx-shortcut .container {
height: 52px;
/* ps */
/* background-color: skyblue; */
}

.xtx-shortcut ul li {
float: left;
line-height: 52px;
color: #666666;
}

.xtx-shortcut ul a {
margin: 0 16px;
color: #dcdcdc;
font-size: 14px;
}

.xtx-shortcut li:last-child a {
margin-right: 0;
}

.xtx-shortcut li:last-child a::before {
content: '';
display: inline-block;
width: 11px;
height: 16px;
margin-top: -3px;
margin-right: 8px;
/* ps */
/* background-color: red; */
background: url('../images/sprites.png') -160px -70px;
/* 垂直对齐方式 */
vertical-align: middle;
}

/* -------------主导航模块：xtx-main-nav */
.xtx-main-nav {
height: 130px;
padding-top: 30px;
/* 自动内减 */
box-sizing: border-box;
/* ps */
/* background-color: pink; */
}

.xtx-main-nav .logo {
width: 207px;
height: 70px;
margin-left: 25px;
/* ps */
/* background-color: red; */
}

.xtx-main-nav .logo a {
display: block;
height: 70px;
background: url('../images/logo.png');
background-size: 100% 100%;
font-size: 0;
}

.xtx-main-nav nav {
margin-left: 40px;
}

.xtx-main-nav nav li {
float: left;
height: 70px;
margin-right: 48px;
line-height: 70px;
}

.xtx-main-nav nav a:hover {
color: #27ba9b;
border-bottom: 1px solid #27ba9b;
padding-bottom: 7px;
}

.xtx-main-nav .search {
position: relative;
width: 172px;
height: 30px;
margin-top: 24px;
margin-left: 34px;
/* ps */
/* background-color: orange; */
}

.xtx-main-nav .search::before {
content: '';
position: absolute;
top: 5px;
left: 2px;
width: 18px;
height: 18px;
/* ps */
/* background-color: red; */
background: url('../images/sprites.png') -80px -70px;
}

.xtx-main-nav .search input {
width: 172px;
height: 30px;
border-bottom: 2px solid #e7e7e7;
padding-left: 31px;
}

.xtx-main-nav .cart {
position: relative;
width: 23px;
height: 23px;
margin-top: 28px;
margin-left: 15px;
/* ps */
/* background-color: skyblue; */
background: url('../images/sprites.png') -120px -70px;
}

.xtx-main-nav .cart span {
/* 子绝父相 */
position: absolute;
right: -12px;
top: -5px;
width: 20px;
height: 15px;
background-color: #e26237;
border-radius: 8px;
color: #fff;
font-size: 13px;
text-align: center;
line-height: 15px;
}

/* ------------------宣传服务：xtx-service */
.xtx-service {
height: 174px;
background-color: #333;
}

.xtx-service .container {
width: 1393px;
height: 173px;
border-bottom: 1px solid #434343;
/* ps */
/* background-color: pink; */
}

.xtx-service .container a {
float: left;
width: 33.33%;
height: 173px;
/* ps */
/* background-color: skyblue; */
text-align: center;
line-height: 173px;
font-size: 28px;
color: #fff;
}

.xtx-service .container a::before {
content: '';
display: inline-block;
width: 58px;
height: 58px;
margin-right: 19px;
/* ps */
/* background-color: red; */
background: url('../images/sprites.png') 0 0;
/* 垂直对齐方式 */
vertical-align: middle;
}

.xtx-service a:nth-child(2)::before {
background-position: -130px 0;
}

.xtx-service a:nth-child(3)::before {
background-position: -65px 0;
}

/* -----------------版权信息：xtx-copyright */
.xtx-copyright {
height: 168px;
background-color: #333;
}

.xtx-copyright .container {
height: 168px;
padding-top: 41px;
box-sizing: border-box;
/* ps */
/* background-color: pink; */
text-align: center;
font-size: 14px;
color: #999;
}

.xtx-copyright .container a {
color: #999;
}

.xtx-copyright .container p:first-child {
height: 35px;
}

/* ---------------网站入口：xtx-entry */
.xtx-entry {
height: 500px;
background-color: #f5f5f5;
}

.xtx-entry .container {
position: relative;
height: 500px;
/* ps */
/* background-color: pink; */
}

.xtx-entry .container .category {
/* 子绝父相 */
position: absolute;
left: 0;
top: 0;
width: 251px;
height: 500px;
background-color: rgba(0,0,0,.8);
}

.xtx-entry .category a {
color: #fff;
}

.xtx-entry .category li {
position: relative;
height: 50px;
padding-left: 36px;
line-height: 50px;
}

.xtx-entry .category li:hover {
background-color: #27ba9b;
}

.xtx-entry .category span {
font-size: 14px;
}

.xtx-entry .category span:first-child {
margin-left: 15px;
}

.xtx-entry .category a::after {
content: '';
position: absolute;
top: 19px;
right: 19px;
width: 6px;
height: 11px;
/* ps */
/* background-color: red; */
background: url('../images/sprites.png') -80px -110px;
}

.xtx-entry .prev {
position: absolute;
top: 228px;
left: 260px;
width: 45px;
height: 45px;
border-radius: 50%;
background: rgba(0,0,0,.2) url('../images/sprites.png') 13px -60px;
/* background-color: rgba(0,0,0,.2); */
}

.xtx-entry .next {
position: absolute;
top: 228px;
right: 10px;
width: 45px;
height: 45px;
border-radius: 50%;
background: rgba(0,0,0,.2) url('../images/sprites.png') -22px -60px;
}

.xtx-entry .indicator {
position: absolute;
left: 680px;
bottom: 31px;
width: 110px;
height: 10px;
/* ps */
/* background-color: red; */
}

.xtx-entry .indicator li {
float: left;
width: 10px;
height: 10px;
margin-right: 15px;
background-color: rgba(255,255,255,.43);
border-radius: 50%;
}

.xtx-entry .indicator li.active {
background-color: #fff;
}

.xtx-entry .indicator li:last-child {
margin-right: 0;
}

/* ----------------新鲜好物模块：xtx-new-goods */
.xtx-new-goods {
height: 520px;
/* ps */
/* background-color: pink; */
}

.xtx-new-goods .goods-hd {
height: 115px;
/* ps */
/* background-color: skyblue; */
line-height: 115px;
}

.xtx-new-goods .goods-hd h2 {
height: 115px;
font-size: 29px;
font-weight: 400;
}

.xtx-new-goods .goods-hd h2 span {
font-size: 16px;
color: #999;
}

.xtx-new-goods .goods-hd a {
color: #666;
}

.xtx-new-goods .goods-hd a::after {
content: '';
display: inline-block;
width: 7px;
height: 13px;
margin-left: 13px;
/* ps */
/* background-color: red; */
background: url('../images/sprites.png') 0 -110px;
vertical-align: middle;
}

.xtx-new-goods .goods-list {
height: 405px;
/* ps */
/* background-color: orange; */
}

.xtx-new-goods .goods-list li {
float: left;
width: 304px;
height: 405px;
margin-right: 8px;
background-color: #f0f9f4;
line-height: 1;
text-align: center;
}

.xtx-new-goods .goods-list li:last-child {
margin-right: 0;
}

.xtx-new-goods .goods-list li img {
width: 100%;
}

.xtx-new-goods .goods-list li h3 {
height: 40px;
margin-top: 22px;
font-size: 20px;
font-weight: 400;
}

.xtx-new-goods .goods-list li p {
color: #9a2e1f;
font-size: 23px;
}

.xtx-new-goods .goods-list li span {
font-size: 17px;
}

   

标签：goods,color,height,width,background,xtx,css
From： https://www.cnblogs.com/1994xiaojian/p/17035895.html

相关文章

  • CSS优先级-权重叠加计算
    •先上总结:a.说明:i.公式:(行内,Id,类,标签)ii.规则:从左至右依次做个数上的比较,如果同级数量一致,则比较下一级个数,直到某一级数......
  • css综合案例小兔鲜儿
    html部分<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"conten......
  • w3cschool的htmlcss知识
      <!DOCTYPEhtml><html><head><style>.dropbtn{background-color:#4CAF50;color:rgb(212,91,91);pa......
  • 【博学谷学习记录】超强总结，用心分享|CSS布局知识总结
    CSS布局一、浮动1.1结构伪类选择器1.作用与优势：作用：根据元素在HTML中的结构关系查找元素优势：减少HTML中类的依赖，有利于保持代码整洁场景：常用于查找某父级选择器中......
  • 4、CSS注释
    CSS的注释与C/C++非常相似，即：/*这里写注释*/ CSS注释支持单行和多行，但不可嵌套。CSS注释相当于没有出现过，所以，可以写在规则内部，也可以写在规则外部。<!DOCTYPEhtml......
  • 3、CSS样式表内容规则的结构
    CSS规则由两部分组成：选择符和声明块。声明块由一个或多个声明组成，一个声明由一个属性和对应的属性值组成。一个样式表由一系列规则构成。p{color:aqua;......
  • 2、如何把CSS应用到HTML
    link标签：作用是把其他文档与当前文档关联起来。 <!DOCTYPEhtml><htmllang="en"><head><linkrel="stylesheet"type=“text/css”href="../CSS/style1.css">......
  • CSS从入门到精通（一）
    CSS ：层叠样式表（·CascadingStyleSheet）,声明样式语言，影响一个或一组文档的表现。“层叠”是指样式可以结合起来使用，而且具有优先级。元素：元素（element）是文档结构的......
  • 使用div+css实现表格布局
    DIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。提起​​DIV+CSS​​​组合，还要从XHTML说起......
  • css常用指南，弹性盒子模型、块标签横向排列、标签放一行、弹性盒子模型内的布局
    弹性盒子模型，块标签横向排列.div_parent{width:600px;height:300px;border:1pxsolidred;}.div_parent>div{width:100px;height:100px;}.div_son1{back......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99