网页制作
Posted 敲不完的代码
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的简单代码片段制作工具
HTML5期末大作业:餐饮美食网站设计——咖啡(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 咖啡网页设计 美食餐饮网页设计...(代码片段
在Tomcat的安装目录下conf目录下的server.xml文件中增加一个xml代码片段,该代码片段中每个属性的含义与用途