某站点静态首页的实现小结

来源:http://www.ido321.com/842.html

header部分的实现

   1: <div class="top">
   2:      <ul class="topul">
   3:          <li id="time"><a href="#">9月25日&nbsp;周四</a></li>
   4:          <li><a href="#">联系我们</a></li>
   5:          <li><a href="#">收藏本站</a></li>
   6:      </ul>
   7:  </div>
   8:  <div class="header">
   9:      <div class="logo">
  10:          <a href="#"><img src="./img/logo.png" alt="xxxxx"></a>
  11:      </div>
  12:      <div class="nav">
  13:          <ul class="navul">
  14:              <li><a href="#">首页</a></li>
  15:              <li><a href="#">校园动态</a></li>
  16:              <li><a href="#">失物招领</a></li>
  17:              <li><a href="#">二手市场</a></li>
  18:              <li><a href="#">论坛专区</a></li>
  19:              <li><a href="#">个人中心</a></li>
  20:          </ul>
  21:      </div>
  22:  </div>
  23: </div>

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: <div class="shaft">
   2:     <div class="past">
   3:         <div class="circle">
   4:             <a href="#"><span>1</span></a>
   5:         </div>
   6:     </div>
   7:     <div class="lianjie"></div>
   8:     <div class="now">
   9:         <div class="circle">
  10:             <a href="#"><span>2</span></a>
  11:         </div>
  12:     </div>
  13:     <div class="lianjie"></div>
  14:     <div class="future">
  15:         <div class="circle">
  16:             <a href="#"><span>3</span></a>
  17:         </div>
  18:     </div>
  19: </div>
  20: <br/><br/><br/>
  21: <div class="maioshu">
  22:     <div class="desc descpast">
  23:         <img src="./img/past.png" alt="past">
  24:         <h3>最初的梦想</h3>
  25:         <p>2008年医工伍学秦创立</p>
  26:     </div>
  27:     <div class="desc descnow">
  28:         <img src="./img/now.png" alt="now">
  29:         <h3>活在当下</h3>
  30:         <p>用爱把协会做好</p>
  31:     </div>
  32:     <div class="desc descfuture">
  33:         <img src="./img/future.png" alt="future">
  34:         <h3>展望未来</h3>
  35:         <p>会有个怎么样的你</p>
  36:     </div>
  37: </div>

基本的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: <!--[if IE]>
   2:   <style type="text/css">
   3:     .circle span
   4:     {
   5:         display:block;
   6:         padding-top:12px;
   7:         font-weight:bold;
   8:     }
   9:   </style>
  10: <![endif]-->
时间: 2024-10-12 16:07:50

某站点静态首页的实现小结的相关文章

某网站静态首页的实现小结

来源:http://www.ido321.com/842.html header部分的实现 1: <div class="top"> 2: <ul class="topul"> 3: <li id="time"><a href="#">9月25日 周四</a></li> 4: <li><a href="#">联系

MVC4.0 如何设置默认静态首页index.shtml

1.不启用二级域名情况下(www.xxx.com)下设置默认静态首页index.shtml 通过配置IIS的默认文档,设置默认首页地址 然后在MVC的路由中写入忽略默认路由代码 routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.IgnoreRoute(""); routes.MapRoute( name: "Default", url: "{controller}/{act

如何在站点静态文件下查找某关键字并修改文件名?

前段时间,因关于某些政治性的内容,公司部分站点需要做处理,而且数据库只保存近几年的,无法通过数据库删除或修改早些年的静态页面数据 站点文件个数,不会少于几百万,我想大家不会一个个手工查找吧!也许真的有人那样搞呢,我只能“呵呵”了 用程序思想去解决工作中遇到的问题,很有必要! 站点环境:linux 可以使用的shell脚本处理,因为他们是天生在一起的,而且处理上很方便,不过一开始有一个问题木有考虑到,后面再讲 上代码,shell代码如下: #!/bin/sh # author: 凹凸曼 # ema

Apache站点默认首页设置

Apache的默认首页为index.html,当我们需要改首页文件或者增加首页文件时,可以在httpd.conf文件中增加配置语句. httpd.conf首页文件默认配置语句如下: <IfModule dir_module> DirectoryIndex index.html </IfModule> 如果我们需要增加首页文件xxx.htm时,可以在DirectoryIndex index.html下增加加一行语句DirectoryIndex xxx.htm,优先级从上到下. 例如我

phpcmsv9生成静态首页的文件名和目录如何改

说下解决办法在\\phpcms\\modules\\content\\classes\\下html.class.php 查找字符"更新首页"然后修改这里就OK了 $file = PHPCMS_PATH.\'index.html\';

nginx配置站点默认首页,伪静态JSP和多Server反向代理

#虽然都是location但是是有区别的 #设置首页 location = / {   proxy_pass http://127.0.0.1/site/eshop/home.html;   proxy_set_header Host $host;    proxy_set_header X-Real-IP $remote_addr;    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } #反向代理 location

计科院静态首页

链接:https://pan.baidu.com/s/11QDHQkUygEJaGXPIrfj1HA 提取码:vytl 复制这段内容后打开百度网盘手机App,操作更方便哦 通过参考网页源代码和审查元素获取该网页图片资源进行编写出的此静态网页 效果展示: 原文地址:https://www.cnblogs.com/CC101/p/10564201.html

云道静态首页练习题

代码地址:https://github.com/sandraryan/practise/tree/master/%E9%9D%99%E6%80%81%E9%A1%B5%E9%9D%A2/%E4%BA%91%E9%81%93%E9%9D%99%E6%80%81%E9%A6%96%E9%A1%B5 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&

SpringBoot入门七,添加默认静态首页

目录resources/static下创建index.html文件即可(路径与文件名称均不可改变) 原文地址:http://blog.51cto.com/1197822/2288018