博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
某网站静态首页的实现小结
阅读量:4286 次
发布时间:2019-05-27

本文共 2916 字,大约阅读时间需要 9 分钟。

来源:

header部分的实现

1: 
2:      
    3:          
  • 9月25日 周四
  • 4:          
  • 联系我们
  • 5:          
  • 收藏本站
  • 6:      
    7:  
    8:  
    9:      
    10:          xxxxx
    11:      
    12:      
    13:          
    14:              
  • 首页
  • 15:              
  • 校园动态
  • 16:              
  • 失物招领
  • 17:              
  • 二手市场
  • 18:              
  • 论坛专区
  • 19:              
  • 个人中心
  • 20:          
    21:      
    22:  
    23: 

    header部分的css

    1: .top
    2: {
    3:     margin-top: 1em;
    4: }
    5: .topul
    6: {
    7:     list-style: none;
    8:     margin-right: 3%;
    9:     color: #8B8989;
    10: }
    11: .topul li
    12: {
    13:     float: right;
    14:     margin-left: 25px;
    15: }
    16: .topul li a
    17: {
    18:     color: #8B8989;
    19:     text-decoration: none;
    20: }
    21: .topul li a:hover
    22: {
    23:     color: #8B8989;
    24:     text-decoration: none;
    25: }
    26: .header
    27: {
    28:     margin-top: 1em;
    29:     height:100px;
    30:     position: relative;
    31:     top: 0;
    32:     left: 0;
    33: }
    34: .logo
    35: {
    36:     float: left;
    37: }
    38: .nav
    39: {
    40:     float: left;
    41:     width: 80%;
    42:     position: absolute;
    43:     top:55%;
    44:     left: 20%;
    45: }
    46: .navul
    47: {
    48:     list-style: none;
    49:     text-align: center;
    50: }
    51: .navul li
    52: {
    53:     float: left;
    54:     width: 12.5%;
    55:     line-height: 200%;
    56:     margin-left: 3.5%;
    57:     letter-spacing: 2px;
    58: }
    59: .navul li a
    60: {
    61:     color: #000000;
    62:     text-decoration: none;
    63: }
    64: .navul li a:hover
    65: {
    66:     color: #000000;
    67:     text-decoration: none;
    68: }

    对于body部分,用css画圆时出现了兼容问题

    1: 
    2:     
    3:         
    4:             1
    5:         
    6:     
    7:     
    8:     
    9:         
    10:             2
    11:         
    12:     
    13:     
    14:     
    15:         
    16:             3
    17:         
    18:     
    19: 
    20: 
    21: 
    22:     
    23:         past
    24:         

    最初的梦想

    25:         

    2008年医工伍学秦创立

    26:     
    27:     
    28:         now
    29:         

    活在当下

    30:         

    用爱把协会做好

    31:     
    32:     
    33:         future
    34:         

    展望未来

    35:         

    会有个怎么样的你

    36:     
    37: 

    主要的css

    1: .circle
    2: {
    3:      background-color:#F8F6F5;
    4:      width: 50px;   /* div的宽和高为600px即正方形的边长为600px */
    5:      height: 50px;
    6:      text-align: center;
    7:
    8:      -moz-border-radius: 25px;   /* 圆的半径为边长的一半,即300px */
    9:      -webkit-border-radius: 25px;
    10:      border-radius: 25px;
    11:
    12:      display: -moz-box;
    13:      display: -webkit-box;
    14:      display: box;
    15:
    16:      -moz-box-orient: horizontal;
    17:      -webkit-box-orient: horizontal;
    18:      box-orient: horizontal;
    19:
    20:      -moz-box-pack: center;
    21:      -moz-box-align: center;
    22:
    23:      -webkit-box-pack: center;
    24:      -webkit-box-align: center;
    25:      box-pack: center;
    26:      box-align: center;
    27:      font:normal 25px/100%;
    28:      text-shadow:1px 1px 1px #000;
    29:      color:#000000;
    30: }

    效果

    在IE中,数字1,2,3不能居中,所以后来加个span(之前没有),用IE hacks解决

    1: 
    2:   
    3:     .circle span
    4:     {
    5:         display:block;
    6:         padding-top:12px;
    7:         font-weight:bold;
    8:     }
    9:   
    10: 
    你可能感兴趣的文章
    javascript之(六)正则表达式
    查看>>
    Git使用之码云的操作步骤、忽略文件
    查看>>
    javascript之贪吃蛇案例
    查看>>
    iOS 吧一个控制器的vie我添加到另外一个控制器中的注意事项
    查看>>
    javascript 之AJAX(一)
    查看>>
    javascript之AJAX(二)json
    查看>>
    nodejs之(一)安装配置
    查看>>
    PHP之LAMP、linux终端命令
    查看>>
    iOS之xcode的常用操作、appledevelope工具下载地址
    查看>>
    MAC常用快捷键和常规操作(一)
    查看>>
    MAC程序员常用服务和最新科技平台
    查看>>
    PHP之SVN的使用
    查看>>
    PHP之mongodb
    查看>>
    PHP之SPHINX的使用(全文搜索引擎)
    查看>>
    PHP之redis
    查看>>
    PHP之lnmp和服务器集群设计思路
    查看>>
    PHP之微信公众平台开发
    查看>>
    iOS 之文件操作NSFileMange和NSFileHandle
    查看>>
    iOS之UIButton的封装和常用属性\按钮UIButton的常用属性及方法总结(二)、多按钮排列、cell上多图片布局
    查看>>
    nodejs基础(一)创建服务器,分发路由,读文件,写文件,读取图片,图文一起显示
    查看>>