网站创建中遇到的问题

在创建山东理工大学网站中，遇到问题：

1、把握整体框架，先划分各框架，并设颜色区分；

2、每块区域设定对应id=“”或class=“”，方便查询，命名以字母、数字、下划线组成。

<body>
    <div id="all">
        <div id="head">
            <div class="h_1"></div>
            <div class="h_2"></div>
        </div>
        <div id="nav"></div>
        <div id="photo"></div>
        <div id="bodyer"></div>
        <div id="footer"></div>
    </div>
    
</body>

3、整体框架设置长，设为固定值，便于兼容，避免页面放缩时变形

#all{
    max-width:1366px;
    min-width: 1028px;
    margin: 0px auto;
    position: relative;
}

margin：标签盒子的外边距，0px，表示上下外边距为0px，auto，表示浏览器计算外边距。

目的是实现，div区域居中。

position在设置时，在父标签，一般设置relative，方便子标签浮动调整位置。

4、导航栏编辑，<div>中嵌套<li>标签，用css对<li>浮动，注意设置内容居中、间距设置，以及<a>标签的显示问题。

<div id="nav">
    <ul>
        <li><a href=""  target="_self">首页</a></li>
        <li><a href="" target="_self">新闻网 </a></li>
        <li><a href="" target="_self">学校概况</a></li>
        <li><a href="" target="_self">机构设置</a></li>
    
    </ul>

</div>

对应css内容：

 1 #nav{
 2     width: 85%;                                    /* 区域宽度 */
 3     height: 50px;                                  /* 区域高度 */
 4     line-height: 50px;                          /* 内容高度居中 */
 5     border-top: 1px solid #ccc;         /* 区域上边框显示 */
 6     margin-left: 10%;                         /*左外边框宽度 */
 7 /*    background: red;*/
 8 }
 9 #nav ul{
10     margin: 0px auto;                    /* ul列表居中*/
11 }
12 #nav li{
13     list-style-type: none;
14     float: left;
15     margin-left:2%;
16     margin-right: 1%;
17     position:relative;
18 }
19 #nav li a{
20     text-decoration: none;                    /* 取消li列表格式*/
21     color: #888888;
22     font-size: 16px;
23 }
24 #nav li a:hover{                              /* 鼠标放上显示红色 */
25     color:red;
26 }

 border-top: 1px solid #ccc; 
显示区域上边框，为灰色实线，粗细为1px，可作为分割线
也可直接用<hr>设置

<hr style="width:70%;margin:0 auto;height: 1px;color: #CCC">

text-decoration: none;
取消列表格式，去掉每列前的圆点标志

list-style-position: inside;
将列表的圆点标志放在区域内（默认区域外）

5、大区域内，平分成三个区域：

<div id="text">
    <div id="text-1"></div>
    <div id="text-2"></div>
    <div id="text-3"></div>
</div>

对应css代码：

#text{
    width: 980px;
    height:630px;
    margin: 0 auto;
/*    background: #ccc;*/
}
#text-1{
    width: 33%;
    height: 630px;
/*    background:red;*/
    float: left;
}
    
#text-2{
    width: 33%;
    height:630px;
/*    background: yellow;*/
    float:left;
}
#text-3{
    width: 33%;
    height: 630px;
/*    background: green;*/
    float: left;
}
#text-2,#text-1{
    margin-right: 0.5%;
}

三个区域每个占33%，text-1和text-2设置右外边框各站0.5%，全部设置左浮

6、列表显示时，无法完整显示，用...表<head> <style>

        #text{
          width: 100px;
          height: 50px;
          background: red;
         }
         #text li{
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
          }
    </style>
</head>
<body>

    <div id="text">
      <ul>
        <li>内容123456</li>
        <li>内容23456</li>
        <li>内容345678</li>
       </ul>
     </div>
</body>

在css中，设置#text li{}。

posted on 2018-06-11 17:10 丁昆阅读(181) 评论(0) 编辑收藏举报