自学前端第十九天:云道页面综合练习

最新推荐文章于 2024-06-02 13:28:15 发布

AKA俄语人Лев

最新推荐文章于 2024-06-02 13:28:15 发布

阅读量738

点赞数 2

分类专栏：前端HTML+CSS基础

本文链接：https://blog.csdn.net/weixin_47592060/article/details/116280812

版权

请添加图片描述

CSS之 reset.css模板

*{
   word-wrap:break-word}
html,body,h1,h2,h3,h4,h5,h6,hr,p,iframe,dl,dt,dd,ul,ol,li,pre,form,button,input,textarea,th,td,fieldset{
   margin:0;padding:0}
ul,ol,dl{
   list-style-type:none}
html,body{
   *position:static}
html{
   font-family: sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
address,caption,cite,code,dfn,em,th,var{
   font-style:normal;font-weight:400}
input,button,textarea,select,optgroup,option{
   font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}
input,button{
   overflow: visible;vertical-align:middle;outline:none}
body,th,td,button,input,select,textarea{
   font-family:"Microsoft Yahei","Hiragino Sans GB","Helvetica Neue",Helvetica,tahoma,arial,Verdana,sans-serif,"WenQuanYi Micro Hei","\5B8B\4F53";font-size:12px;color: #333;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing:grayscale}
body{
   line-height:1.6}
h1,h2,h3,h4,h5,h6{
   font-size:100%}
a,area{
   outline:none;blr:expression(this.onFocus=this.blur())}
a{
   text-decoration:none;cursor: pointer}
a:hover{
   text-decoration:underline;outline:none}
a.ie6:hover{
   zoom:1}
a:focus{
   outline:none}
a:hover,a:active{
   outline:none}:focus{
   outline:none}
sub,sup{
   vertical-align:baseline}
button,input[type="button"], input[type="submit"] {
   line-height:normal !important}
/*img*/
img{
   border:0;vertical-align:middle}
a img,img{
   -ms-interpolation-mode:bicubic}
.img-responsive{
   max-width: 100%;height: auto}
 
/*IE下a:hover 背景闪烁*/
*html{
   overflow:-moz-scrollbars-vertical;zoom:expression(function(ele){
   ele.style.zoom = "1";document.execCommand("BackgroundImageCache",false,true)}(this))}
 
/*HTML5 reset*/
header,footer,section,aside,details,menu,article,section,nav,address,hgroup,figure,figcaption,legend{
   display:block;margin:0;padding:0}time{
   display:inline}
audio,canvas,video{
   display:inline-block;*display:inline;*zoom:1}
audio:not([controls]){
   display:none}
legend{
   width:100%;margin-bottom:20px;font-size:21px;line-height:40px;border:0;border-bottom:1px solid #e5e5e5}
legend small{
   font-size:15px;color:#999}
svg:not(:root) {
   overflow: hidden}
fieldset {
   border-width:0;padding: 0.35em 0.625em 0.75em;margin: 0 2px;border: 1px solid #c0c0c0}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {
   height: auto}
input[type="search"] {
   -webkit-appearance: textfield; /* 1 */-moz-box-sizing: content-box;-webkit-box-sizing: content-box; /* 2 */box-sizing: content-box}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {
   -webkit-appearance: none}
/*
Name:			style_clearfix
Example:		class="clearfix|cl"
Explain:		Clearfix（简写cl）避免因子元素浮动而导致的父元素高度缺失能问题
*/
.cl:after,.clearfix:after{
   content:".";display:block;height:0;clear:both;visibility:hidden}.cl,.clearfix{
   zoom:1}

云道网页index综合案例1:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>云道官网</title>
  <link rel="stylesheet" href="reset.css ">
  <style>
    /* 1.拿到PSD图,先写通用样式:盒子版心通用宽度, 多个的字体颜色|大小|行高|对齐 , 左右float   */
/* mr和pr内外边距等等,clearfix类, bc背景颜色, */

a {
    
  color: #666;
}

a:hover {
    
  color: #2288f6;
  text-decoration: none;
}

.w1054 {
    
  width: 1054px;
/*   height: ; 不要写死高度,但要防止脱标的父容器高度塌陷要写clearfix类*/
 margin: 0 auto;
}


.w1200 {
    
  width: 1200px;  
  margin: 0 auto;
}


.c228 {
    
  color: #2288f6;
}

.c333 {
            /* 333和666用最多 */
  color: #333;
}

.c666 {
    
  color: #666;
}

.cfff {
    
  color: #fff;
}
.bcfa {
    
  background-color: #fafafa;
}

.fz14 {
    
  font-size: 14px;
}

.fz24 {
    
  font-size: 24px;
}

.fw400 {
    
  font-weight: 400;
}

.lh24 {
    
  line-height: 24px;
}

.lh52 {
    
  line-height: 52px;
}

.fl {
    
  float: left;
}

.fr {
    
  float: right;
}

.pt42 {
    
  padding-top: 42px;
}

.ali_center {
    
  text-align: center;
}


/* 下面开始进入页面 正题: header start了 */

/* PS:1.不要给body去设置设计图中的总宽度,因为设计图是固定的,而浏览器是可以拉长的,因此写死了用户体验不好
   只用套个盒子给各个部分的版心写宽度即可,背景图片可以用cover自适应伸缩.  

   2.海牙老师都是喜欢用padding去代替margin充当盒子之间的距离,这样比较有弹性,让盒子之间不要有margin那部分卡着,而是用padding给其中一个盒子加肌肉,
   让结构部分就两个盒子,当然用margin也可以,只是要考虑穿透,合并,反推等情况哦


*/

.nav ul li {
    
  float: left;
  font-size: 18px;
 /*margin-top: 48px;   //也可以用margin
   margin-left:40px;  */
  padding:0 20px;         /* 此时这里的padding等于margin是不会扩大父盒子的宽度的 */  
  padding-top:48px;        
 /* color: #666; 该a标签颜色没有无效的,因为继承来的样式为0, 自身也有默认颜色*/
}


/*banner start*/
.banner {
    
  height: 620px; /* 宽默认整行 */
  background: #fff url(img/banner.jpg) no-repeat center/cover;
}



/* container start*/
.container {
    
  width: 1054px;
  margin:0 auto;
  padding-top:64px; 
  padding-bottom: 200px; /* 整个container的和上下盒子之间边距,也可margin */
}

/* 下面使用相对定位解决中间分界线的 */
.container .con_title {
      
  width: 1000px;
  border-top: 1px solid #ccc;
  text-align: center;   /* 标题下面的行内元素img居中 */
  margin: 0 auto;  /* 整条线居中 */
}
.container .con_title .con_title_img {
    
  background-color: #fafafa;
  position:relative;
  top:-12px;
}

.con_des {
    
    width: 843px;  
    padding:11px 106px 45px; /* 24-14=10/2=5 为行高的上下部分 */
                          /* 这里11就够了,因为相对定位盒子又上去了12相当于自动增加了12pad,
                          设计图规定的28pad-5行高上部分=23px-12=11px (细节:行高的上部分 + padding才一起组成的盒子上面之间的距离)  */
                        /*106px是扩充左右两边的肌肉达到间接居中 */
                       /*  45px是 设计图规定的50pad-5行高下部分=45px (细节:行高的下部分 + padding才一起组成的盒子下面的距离)  */
    text-align: center; /* 标题全部居中 */
  }


/* 下面使用伪元素解决中间分界线的 */
/* 
.container .con_title {   /* 标题居中 
  border-top: 1px solid #ccc;
  text-align: center;
}
.con_title:before,     
.con_title:after {     /* 标题前后的线,这里用的是在盒子即图片前后插入前后影分身
                         可以用hr+相对定位移动,也可以设置一个对应宽度p只要写一个上边框出来+ 相对定位 
  display: inline-block;
  content: '';
  width: 417px;
  height: 1px;
  background-color: #ccc;
} 

.con_des {
  width: 843px;  
  padding:23px 106px 45px; /* 24-14=10/2=5 为行高的上下部分 */
                        /* 23是 设计图规定的28pad-5行高上部分=23px (细节:行高的上部分 + padding才一起组成的盒子上面之间的距离)  */
                      /*106px是扩充左右两边的肌肉达到间接居中 */
                     /*  45px是 设计图规定的50pad-5行高下部分=45px (细节:行高的下部分 + padding才一起组成的盒子下面的距离)  
  text-align: center;
}*/


.con_server .con_wrap li {
     /*带有模糊轮廓图片无法确定内部原始宽度的盒子时,可以适当使用怪异盒子模型去先确定总宽度,内缩内容 */
  box-sizing: border-box;
  float: left;
  width: 320px;
  height: 510px;
  padding: 42px 42px 0; /* 上 左右 下*/
  border: 1px solid #e7e8e9;
  text-align: left;
  
}


.con_server .con_wrap li.wrap_mid {
     /* 只用给中间mid盒子加margin左右即可,这样一次性和两边盒子扩开 */
  margin:0 47px;
}

.con_server .con_wrap .con_list_title {
      /* 中部小标题 */
  text-align: center;
  line-height: 52px;/* 14+ 14 +24 */
  padding-top: 28px;/* 42px-14px行高=28的pad */
}


.con_server .con_wrap .con_list_btn {
      /* 底部a标签按钮 */
  display:block;
  width: 150px;
  margin: 35px auto 0; /* 有边框不能用pad充当margin了,只能用margin了 */
  /* 实现a盒子居中 */
  line-height: 38px; 
  color: #fff;
  background-color: #ff9412;
  border-radius: 4px; /* 边角边框  */
}




/* con-case start */
.con_case {
    
  padding-top: 76px;  /* 64px+12 */
  padding-bottom: 60px;
  
}

.con_case .con_wrap {
    
  position: relative;
  margin-top: 30px; 
 /* padding-top: 30px; */
}

.con_case .con_wrap li {
    
  position: relative;
  float: left;
  width: 324px;
  height: 211px;
}

.con_case .con_wrap li.case_middle {
     /*只用给middle中间盒子加margin左右即可,这样一次性和两边盒子扩开 */
  margin: 0 40px;
}

.con_case .case_des {
    
  position: absolute;  /* 子盒子绝对定位,然后对齐定位父级的左下角, */
  left: 0;
  bottom: 0;
  width: 100%;    /* p单行文本盒子直接宽度继承定位父级的全部宽度,写具体也可以,然后文字text再居中即可 */
  line-height: 46px; /* 行高直接就可以是p单行文本盒子的高度了:字体+上下两侧 */
  background-color: rgba(0, 0, 0, .5); /* 透明度完事 */
}

.con_case .case_mask {
       /* 开发很多用:case中的全部li盒子都蒙上了一层none隐藏面具,通过hover点击再渲染展现出的效果 */
  display: none;   /* 这个隐藏盒子是不显示的 */
  position: absolute;  /* 定位父级还是li盒子,千万别觉得上面最近的position盒子p就是定位父级,有可能是同级盒子不能当父级啊啊!! */
  top: 0;  /* 不位移,也必须写上偏移属性,否则定位失效 */
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5) url(img/fdj.png) no-repeat center; 
  /* 左右上下居中即可,最后大小不变的所以不用写, 千万不能写cover,会把整个放大镜图片都铺满,不是想要的效果*/
}

.con_case li:hover .case_mask {
      /* 通过hover点击 ,让mask盒子block出现 */
  display: block;
}

.con_case .con_wrap:before,  /* 一定要选择好给谁加前后影分身,这里选择con_wrap盒子,因为定位位置上最好移动 */
.con_case .con_wrap:after {
    
  content: '<';        /* 一定先激活 */
  position: absolute;  /* 定位父级为什么是con_wrap , 因为当标签和前后影分身都是盒子时,他们之间是父子嵌套关系的, */
  top: 0;
  bottom: 0;  /* 垂直居中三剑客 */
  margin:auto ;
  width: 60px;   /*  盒子宽高 */
  height: 60px;
  font-size: 52px;   
  line-height: 54px; /* 行高和盒子宽度一致不是应该垂直居中的么??,是因为这是圆形么*/
                     /*这里视觉上不是垂直居中对齐,需要自己一点一点调  */
  color: #fff;
  text-align: center;/* */
  background-color: rgba(0, 0, 0, .6);  /* 图标透明度 */
  border-radius: 50%; /* 变为圆形 */
}

.con_case .con_wrap:before {
    
   left: -90px;    /* 这里要注意:超级重要细节:因为两个盒子左右偏移是不同方向的,因此要分开写不能覆盖的 */
}                  /* 上面不能写任何的左右偏移属性先,你细品
                      第一:是因为写了margin:auto.写了上下左右一起写会变为中心居中,然后才开始移动的.
                      第二,上面一旦写了left或者right.那么下面写right覆盖, left和right是两个不同属性,根本无法覆盖 
                      因此有一个必然会冲突,即左右都移动了.
                      */
                   

.con_case .con_wrap:after {
    
  content: '>';
  right:-90px;
}
.con_case .con_wrap:hover::before,
.con_case .con_wrap:hover::after{
    
  background-color: #4fa5f3;
}



    /* .con-media {
      padding-top: 125px;
    }

    .con-media .con-wrap {
      position: relative;
      left: -24px;
      overflow: hidden;
      width: 1105px;
      height: 242px;
      padding-top: 50px;
    }

    .con-media .con-wrap ul {
      position: relative;
      left: -38px;
      width: 1162px;
    }

    .con-media .con-wrap li {
      float: left;
      text-align: center;   水平居中
      width: 231px;         垂直居中
      height: 80px;
      line-height: 80px;
      border-right: 1px dashed #ccc;  
      border-bottom: 1px dashed #ccc;
      
    }

    .con-media .con-wrap li:nth-of-type(5n+3) {
      width: 236px;
    }

    .con-media .con-wrap li:nth-of-type(5n+2),
    .con-media .con-wrap li:nth-of-type(5n+4) {
      width: 229px;
    } */

    .con_media {
    
      /* 爷爷盒子版心继承1054px宽度 */
      padding-top: 76px;  /* 64+12px */
    }

    .con_media .con_wrap {
       /* 设置一个整个ul的父盒子wrap */
      overflow: hidden;     /* 这里设置overflow是为了截取总右边框 , 子ul1150> 父wrap1106,因此子多的部分即包含了总的右边框,截掉拜拜
                             而高度这里没设置,默认就是子ul内容高度 ,没有超出不用截取.                                                                                         */
      position: relative;
      width: 1106px;  /* 子ul超出父wrap1106就截掉 */
      left: -26px

最低0.47元/天解锁文章

AKA俄语人Лев

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
自学前端第十九天:云道页面综合练习

CSS之 reset.css模板*{word-wrap:break-word}html,body,h1,h2,h3,h4,h5,h6,hr,p,iframe,dl,dt,dd,ul,ol,li,pre,form,button,input,textarea,th,td,fieldset{margin:0;padding:0}ul,ol,dl{list-style-type:none}html,body{*position:static}html{font-family: sans-...
复制链接

扫一扫

专栏目录