web前端开发遇到问题记录

最新推荐文章于 2023-09-14 11:30:34 发布

Thinking924

最新推荐文章于 2023-09-14 11:30:34 发布

阅读量430

点赞数 1

文章标签： web html web前端开发布局结构

本文链接：https://blog.csdn.net/qq_34285699/article/details/52244370

版权

制作一个网站首页遇到的问题

首先是网站的结构：头部，标志logo，主体部，尾部
主体部分一般采用三列布局或者俩列布局

<div class="wrap">
  <div class="logo">......<div>
  <div class="nav">......<div>
  <div class="main">......<div>
<div>

实现文本内容垂直居中，设置line-light

.nav_mid_left li{
    float: left;
    list-style-type: none;
    width: 100px;
    text-align: center;
    line-height: 39px;       /**设置行高为div的高度,实现内容垂直方向居中*/
}

实现标题圆滑，圆角边框

.nav_middle{
    width: 1000px;
    background: url(../images/nav_bg.jpg) repeat-x;
    border-radius: 5px;
    float: left;
    height: 40px;
}

```
多列布局float实现
```

焦点图采用了myFocus/效果很不错

<pre name="code" class="html"><script src="js/myfocus-2.0.1.min.js" type="text/javascript"></script>
<script src="js/mf-pattern/mF_fancy.js" type="text/javascript"></script>
<link href="js/mf-pattern/mF_fancy.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    myFocus.set({
        id:'picBox',
        pattern:'mF_fancy',
        time:3,
        trigger:'click',
        width:1000,
        height:310,
        txtHeight:'default'
    });
</script>