网页制作

Posted 2020-09-22 敲不完的代码

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网页制作相关的知识，希望对你有一定的参考价值。

一.其他样式

:hover 代表鼠标移上执行哪些样式
cursor:pointer; 鼠标的光标变成手

display:none隐藏 block显示隐藏不占位置
visibility:hidden 隐藏 visible 显示隐藏占位置

overflow:hidden; 超出部分隐藏

透明效果：
opacity:0.2;
-moz-opacity:0.2;
filter:alpha(opacity=20);

border-radius:5px;圆角
box-shadow:0 0 5px white; 阴影效果

二.自己制作网页

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
            
    
    <link href="index.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
          <!--头部菜单开始-->
          <div id="index_head">
               <div id="head_logo">
               <img src="../../汉企课件/0611样式表/0603/img/logo1.png" width="200" height="100" />
               </div>
               <div id="head_mune">
                    <div class="mune_list">联系我们</div>
                    <div class="mune_list">关于我们</div>
                    <div class="mune_list">新闻动态</div>
                    <div class="mune_list">产品展示</div>
                    <div class="mune_list mune_selete">首页</div>
               </div>
          
          
          </div>
          <!--头部菜单结束-->
          <hr id="head_fenge" color="#6600CC" size="1" />   
          <!--大图-->   
          <div id="center_datu">
            <img src="../../汉企课件/0611样式表/0603/img/20170516114133939.jpg" width="1200" height="642" />
            
            <div id="img_prey"></div>
            <div id="img_next"></div>
            
          </div>   
          <!--大图结束--> 
          
          <!--产品推荐-->
          <div id="index_chanpin_title">公司产品推荐</div>
          <div id="index_chanpin_wai">
                <div class="index_chanin_list">
                      <div class="index_chanin_img">
                       <img src="../../汉企课件/0611布局页面/0603/img/20170518071914505.jpg" width="280" height="180" />
                      </div>
                      <div class="index_chanin_list_title">
                      明星产品推荐
                      </div>
                      <div class="index_chanin_list_jianjie">明星产品推荐</div>
                </div>
                <div class="index_chanin_list">
                      <div class="index_chanin_img">
                       <img src="../../汉企课件/0611布局页面/0603/img/20170518071914505.jpg" width="280" height="180" />
                      </div>
                      <div class="index_chanin_list_title">
                      明星产品推荐
                      </div>
                      <div class="index_chanin_list_jianjie">明星产品推荐</div>
                </div>
                <div class="index_chanin_list">
                      <div class="index_chanin_img">
                       <img src="../../汉企课件/0611布局页面/0603/img/20170518071914505.jpg" width="280" height="180" />
                      </div>
                      <div class="index_chanin_list_title">
                      明星产品推荐
                      </div>
                      <div class="index_chanin_list_jianjie">明星产品推荐</div>
                </div>
                <div class="index_chanin_list">
                      <div class="index_chanin_img">
                       <img src="../../汉企课件/0611布局页面/0603/img/20170518071914505.jpg" width="280" height="180" />
                      </div>
                      <div class="index_chanin_list_title">
                      明星产品推荐
                      </div>
                      <div class="index_chanin_list_jianjie">明星产品推荐</div>
                </div>
          </div>
          <!--产品推荐结束-->
          <div style="clear:both"></div>
          <!--其他开始-->
          <div id="index_qita_wai">
                <div class="ixdex_qita_list">
                      <div class="ixdex_qita_title">
                           <div class="ixdex_qita_bt_left">
                           产品展示
                           </div>
                           <div class="ixdex_qita_bt_right">
                           更多>>
                           </div>
                           <div class="index_qita_img">
                                <img src="../../汉企课件/0611布局页面/0603/img/20170516071750947.jpg" width="280" height="269" />
                           </div>
                           <div class="ixdex_qita_test">
                           臻体纤美穴位贴敷治疗贴采用独特配方研发而成，拥有远红外磁疗技术，纯天然外用健康产品，拥有很好的辅助瘦身效果，安全无副作用，此产品均由几十年国家认证老药企-朱氏药业生产。
                           </div>
                      </div>
                </div>
                <div class="ixdex_qita_list">
                      <div class="ixdex_qita_title">
                           <div class="ixdex_qita_bt_left">
                           产品展示
                           </div>
                           <div class="ixdex_qita_bt_right">
                           更多>>
                           </div>
                           <div class="index_qita_img">
                                <img src="../../汉企课件/0611布局页面/0603/img/20170516071750947.jpg" width="280" height="269" />
                           </div>
                           <div class="ixdex_qita_test">
                           臻体纤美穴位贴敷治疗贴采用独特配方研发而成，拥有远红外磁疗技术，纯天然外用健康产品，拥有很好的辅助瘦身效果，安全无副作用，此产品均由几十年国家认证老药企-朱氏药业生产。
                           </div>
                      </div>
                </div>
                <div class="ixdex_qita_list">
                      <div class="ixdex_qita_title">
                           <div class="ixdex_qita_bt_left">
                           产品展示
                           </div>
                           <div class="ixdex_qita_bt_right">
                           更多>>
                           </div>
                           <div class="index_qita_img">
                                <img src="../../汉企课件/0611布局页面/0603/img/20170516071750947.jpg" width="280" height="269" />
                           </div>
                           <div class="ixdex_qita_test">
                           臻体纤美穴位贴敷治疗贴采用独特配方研发而成，拥有远红外磁疗技术，纯天然外用健康产品，拥有很好的辅助瘦身效果，安全无副作用，此产品均由几十年国家认证老药企-朱氏药业生产。
                           </div>
                      </div>
                </div>
                <div class="ixdex_qita_list">
                      <div class="ixdex_qita_title">
                           <div class="ixdex_qita_bt_left">
                           产品展示
                           </div>
                           <div class="ixdex_qita_bt_right">
                           更多>>
                           </div>
                           <div class="index_qita_img">
                                <img src="../../汉企课件/0611布局页面/0603/img/20170516071750947.jpg" width="280" height="269" />
                           </div>
                           <div class="ixdex_qita_test">
                           臻体纤美穴位贴敷治疗贴采用独特配方研发而成，拥有远红外磁疗技术，纯天然外用健康产品，拥有很好的辅助瘦身效果，安全无副作用，此产品均由几十年国家认证老药企-朱氏药业生产。
                           </div>
                      </div>
                </div>
          </div>
          <!--其他结束-->
          <hr id="fotter_fenge" color="#6600CC" size="1" />
          <!--页脚-->
          <div id="index_fotter">
               <div id="index_fotter_one">
               Copyright ? 2017-2018 臻体纤美 版权所有　天启网络技术支持
               </div>
               <div id="index_fotter_two">
               电话：0635-8240686　邮箱：[email protected]　地址：聊城市东昌府区市政大楼
               </div>
          </div>
          <!--页脚结束-->
    
    
    
    
    
    
    </body>
</html>

index.css

@charset "utf-8";
*{
    margin:0px auto;
    padding:0px;
    font-family:微软雅黑；
}
#index_head{
    width:1200px;
    height:118px;
    }
#head_logo{
        width:200px;
        height:100px;
        float:left;
    }
#head_mune{
    width:1000px;
    height:118px;
    float:left;
}
.mune_list{
    width:80px;
    height:80;
    background-image:url(../../%E6%B1%89%E4%BC%81%E8%AF%BE%E4%BB%B6/0611%E6%A0%B7%E5%BC%8F%E8%A1%A8/0603/img/li_bg.png);
    float:right;
    text-align:center;
    line-height:80px;
    vertical-align:middle;
    font-size:13px;
    color:#60F;
    margin-top:38px;
}
.mune_list:hover{
    color:white;
    background-image:url(../../%E6%B1%89%E4%BC%81%E8%AF%BE%E4%BB%B6/0611%E6%A0%B7%E5%BC%8F%E8%A1%A8/0603/img/li_bg_h.png);
    cursor:pointer;
    
}
.mune_selete{
    color:white;
    background-image:url(../../%E6%B1%89%E4%BC%81%E8%AF%BE%E4%BB%B6/0611%E6%A0%B7%E5%BC%8F%E8%A1%A8/0603/img/li_bg_h.png);
}
    
#center_datu{
    width:1200px;
    height:642px;
    margin-top:10px;
}
#img_prey{
    width:44px;
    height:44px;
    background-image:url(../../%E6%B1%89%E4%BC%81%E8%AF%BE%E4%BB%B6/0611%E6%A0%B7%E5%BC%8F%E8%A1%A8/0603/img/jiantou.png);
    position:relative;
    top:-343px;
    left:-560px;
}
#img_prey,#img_next{
    cursor:pointer;
}
#img_next{
    width:44px;
    height:44px;
    background-image:url(../../%E6%B1%89%E4%BC%81%E8%AF%BE%E4%BB%B6/0611%E6%A0%B7%E5%BC%8F%E8%A1%A8/0603/img/jiantou.png);
    background-position:right 0px;
    position:relative;
    top:-387px;
    right:-560px;
}
#index_chanpin_title{
    width:1200px;
    height:50px;
    margin:30px 0px 20px 0px;
    text-align:center;
    line-height:50px;
    vertical-align:middle;
    font-size:22px;
    color:#F00;
    font-weight:bold;
}
#index_chanpin_wai{
    width:1200px;
    height:302px;
}
.index_chanin_list{
    width:280px;
    height:300px;
    border:1px solid #CC0;
    float:left;
    margin:0px 9px 0px 9px;
}
.index_chanin_img{
    width:280px;
    height:180px;
}
.index_chanin_list_title{
    width:270px;
    height:30px;
    padding:5px;
    font-size:14px;
    font-weight:bold;
    line-height:30px;
    vertical-align:middle;
}
.index_chanin_list_jianjie{
    width:270px;
    height:60px;
    padding:5px;
    font-size:13px;
    line-height:60px;
    vertical-align:middle;
    overflow:hidden;
}
#index_qita_wai{
    width:1200px;
    height:406px;
    margin-top:20px;
    margin-bottom:20px;
}
.ixdex_qita_list{
    width:280px;
    height:406px;
    border:1px solid #CC0;
    margin:0px 9px 0px 9px;
    float:left;
}
.ixdex_qita_title{
    width:280px;
    height:45px;
    background-color:#60C;
}
.ixdex_qita_bt_left{
    float:left;
    height:45px;
    margin-left:10px;
    line-height:45px;
    vertical-align;
    font-weight:bold;
    font-size:15px;
    color:#FFF;
}
.ixdex_qita_bt_right{
    float:right;
    height:45px;
    margin-right:10px;
    line-height:45px;
    vertical-align;
    font-weight:bold;
    font-size:14px;
}
.index_qita_img{
    width:280px;
    height:269px;
}
.ixdex_qita_test{
    width:260px;
    height:72px;
    padding:10px;
    overflow:hidden;
    font-size:13px;
    text-indent:20px;
    color:#C0C;
}
#index_fotter{
    width:1200px;
    height:120px;
}
#index_fotter_one{
    width:1200px;
    height:35px;
    margin-top:30px;
    text-align:center;
    line-height:35px;
    vertical-align:middle;
    font-size:13px;
    color:#60C;
}
#index_fotter_two{
    width:1200px;
    height:35px;
    text-align:center;
    line-height:35px;
    vertical-align:middle;
    font-size:13px;
    color:#60C;
}

以上是关于网页制作的主要内容，如果未能解决你的问题，请参考以下文章

python 用于在终端中运行的sublime text 3的简单代码片段制作工具

为啥此代码片段返回意外结果？

炫酷 CSS 背景效果的 10 个代码片段

微信小程序代码片段

HTML5期末大作业：餐饮美食网站设计——咖啡(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计咖啡网页设计美食餐饮网页设计...(代码片段

在Tomcat的安装目录下conf目录下的server.xml文件中增加一个xml代码片段,该代码片段中每个属性的含义与用途