快速导航
網站基本佈局
請多多指教!
製作一個網站大致佈局：
第一種：
第二種：
在HTML中：
在
中加入標籤；并在加入標籤圖標：<link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon">//favicon.ico為圖片大小為16 * 16的ico；</p><pre class='brush:php;toolbar:false'><meta name=”keywords” content=””>//寫入關鍵字
<meta name=” description” content=””>//網站描述；這兩個是為了seo</pre><p>而關於css:</p><p>首先先将所有的外边距及内边距设为0：*{margin:0;padding:0}</p><p>將body設為：</p><p><strong>body</strong>{<br> <br> <strong>font-family</strong>: <strong>-apple-system</strong>, <strong>BlinkMacSystemFont</strong>, <strong>'Microsoft YaHei'</strong>, <strong>sans-serif</strong>;<br><br> <br> <strong>font-size</strong>: 16<strong>px</strong>;<br><br> <br> <strong>color</strong>: <strong>#333</strong>;<br><br> <br> <strong>line-height</strong>: 1.75;<br> }</p><p>ul li若是将图片该改为样式list-style-image：url(“”);</p><p>图片：alt：图片不能显示时出现的文字：title：鼠标移上去时提示的文字；</p><p>讓文字與圖片中間對齊；將圖片設置為vertical-align：middle；</p><p> 记住尖括号>>要用转义符：>；<<:<</p><p><br></p><p>關於內容部分：記得模塊化，背景添加動態圖（氣泡）或漸變色；</p><p>文字樣式：描邊，陰影，倒影，斜體，粗體，顏色；</p><p> 文字具有立體效果：</p><pre class='brush:php;toolbar:false'>text-shadow: 0px 1px 0px rgb(204, 204, 204),
0px 2px 0px rgb(201, 201, 201),
0px 3px 0px rgb(187, 187, 187),
0px 4px 0px rgb(185, 185, 185),
0px 5px 0px rgb(170, 170, 170),
0px 6px 1px rgba(0, 0, 0, 0.1),
0px 0px 5px rgba(0, 0, 0, 0.1),
0px 1px 3px rgba(0, 0, 0, 0.3),
0px 3px 5px rgba(0, 0, 0, 0.2),
0px 5px 10px rgba(0, 0, 0, 0.25),
0px 20px 20px white;</pre><p>按鈕：主要是背景色，陰影，顏色 和hover效果；</p><p>主要：控制好留白和陰影；<br></p><p> 若是加載需要時間記得添加加載動態圖；</p><p> 網頁響應式網站（手機端和pc端兩種個）；兼容性；css動圖；漸變色；等</p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p></div>
</div>
<div style="clear: both;"></div>
<div class="author-info fl">
<div><span class="gray">转载请注明：</span>文章转载自 <a href="https://www.mshxw.com/" class="blue">www.mshxw.com</a></div>
<div><span class="gray">本文地址：</span><a href="https://www.mshxw.com/it/242428.html" class="blue">https://www.mshxw.com/it/242428.html</a></div>
</div>
<div class="prev fl">
<p> <a style='text-align:left;' class='center-block text-center glyphicon glyphicon-collapse-down' href="https://www.mshxw.com/it/242466.html">上一篇 CSS3 clip-path & clip-path 打破矩形设计的限制</a>
</p>
<p> <a style='text-align:left;' class='center-block text-center glyphicon glyphicon-collapse-down' href="https://www.mshxw.com/it/242431.html">下一篇 css解决Chrome中10px字体的方法</a>
</p>
</div>
<div class="new_tag fl">
</div>
</div>
<div class="new_r fr" style="border-radius:10px;">
<div class="tui fl">
<h3>CSS教程相关栏目本月热门文章</h3>
<ul>
<li><span>1</span><a href="https://www.mshxw.com/it/1041277.html" title="【Linux驱动开发】设备树详解（二）设备树语法详解">【Linux驱动开发】设备树详解（二）设备树语法详解</a></li>
<li><span>2</span><a href="https://www.mshxw.com/it/1041273.html" title="别跟客户扯细节">别跟客户扯细节</a></li>
<li><span>3</span><a href="https://www.mshxw.com/it/1041266.html" title="Springboot+RabbitMQ+ACK机制(生产方确认(全局、局部)、消费方确认)、知识盲区">Springboot+RabbitMQ+ACK机制(生产方确认(全局、局部)、消费方确认)、知识盲区</a></li>
<li><span>4</span><a href="https://www.mshxw.com/it/1041261.html" title="【Java】对象处理流（ObjectOutputStream和ObjectInputStream）">【Java】对象处理流（ObjectOutputStream和ObjectInputStream）</a></li>
<li><span>5</span><a href="https://www.mshxw.com/it/1041256.html" title="【分页】常见两种SpringBoot项目中分页技巧">【分页】常见两种SpringBoot项目中分页技巧</a></li>
<li><span>6</span><a href="https://www.mshxw.com/it/1041299.html" title="一文带你搞懂OAuth2.0">一文带你搞懂OAuth2.0</a></li>
<li><span>7</span><a href="https://www.mshxw.com/it/1041297.html" title="我要写整个中文互联网界最牛逼的JVM系列教程 | 「JVM与Java体系架构」章节：虚拟机与Java虚拟机介绍">我要写整个中文互联网界最牛逼的JVM系列教程 | 「JVM与Java体系架构」章节：虚拟机与Java虚拟机介绍</a></li>
<li><span>8</span><a href="https://www.mshxw.com/it/1041296.html" title="【Spring Cloud】新闻头条微服务项目：FreeMarker模板引擎实现文章静态页面生成">【Spring Cloud】新闻头条微服务项目：FreeMarker模板引擎实现文章静态页面生成</a></li>
<li><span>9</span><a href="https://www.mshxw.com/it/1041294.html" title="JavaSE - 封装、static成员和内部类">JavaSE - 封装、static成员和内部类</a></li>
<li><span>10</span><a href="https://www.mshxw.com/it/1041291.html" title="树莓派mjpg-streamer实现监控及拍照功能调试">树莓派mjpg-streamer实现监控及拍照功能调试</a></li>
<li><span>11</span><a href="https://www.mshxw.com/it/1041289.html" title="用c++写一个蓝屏代码">用c++写一个蓝屏代码</a></li>
<li><span>12</span><a href="https://www.mshxw.com/it/1041285.html" title="从JDK8源码中看ArrayList和LinkedList的区别">从JDK8源码中看ArrayList和LinkedList的区别</a></li>
<li><span>13</span><a href="https://www.mshxw.com/it/1041281.html" title="idea 1、报错java: 找不到符号 符号: 变量 log 2、转换成Maven项目">idea 1、报错java: 找不到符号 符号: 变量 log 2、转换成Maven项目</a></li>
<li><span>14</span><a href="https://www.mshxw.com/it/1041282.html" title="在openwrt使用C语言增加ubus接口（包含C uci操作）">在openwrt使用C语言增加ubus接口（包含C uci操作）</a></li>
<li><span>15</span><a href="https://www.mshxw.com/it/1041278.html" title="Spring 解决循环依赖">Spring 解决循环依赖</a></li>
<li><span>16</span><a href="https://www.mshxw.com/it/1041275.html" title="SpringMVC——基于MVC架构的Spring框架">SpringMVC——基于MVC架构的Spring框架</a></li>
<li><span>17</span><a href="https://www.mshxw.com/it/1041272.html" title="Andy‘s First Dictionary C++ STL set应用">Andy‘s First Dictionary C++ STL set应用</a></li>
<li><span>18</span><a href="https://www.mshxw.com/it/1041271.html" title="动态内存管理">动态内存管理</a></li>
<li><span>19</span><a href="https://www.mshxw.com/it/1041270.html" title="我的创作纪念日">我的创作纪念日</a></li>
<li><span>20</span><a href="https://www.mshxw.com/it/1041269.html" title="Docker自定义镜像-Dockerfile">Docker自定义镜像-Dockerfile</a></li>
</ul>
</div>
</div>
</div>
<!-- 公共尾部 -->
<div class="link main">
<div class="link_tit">
<span class="on">热门相关搜索</span>
</div>
<div class="link_tab">
<div class="link_con">
<a href="http://www.mshxw.com/TAG_1/luyouqishezhi.html">路由器设置</a>
<a href="http://www.mshxw.com/TAG_1/mutuopan.html">木托盘</a>
<a href="http://www.mshxw.com/TAG_1/baotamianban.html">宝塔面板</a>
<a href="http://www.mshxw.com/TAG_1/shaoerpython.html">儿童python教程</a>
<a href="http://www.mshxw.com/TAG_1/xinqingdiluo.html">心情低落</a>
<a href="http://www.mshxw.com/TAG_1/pengyouquan.html">朋友圈</a>
<a href="http://www.mshxw.com/TAG_1/vim.html">vim</a>
<a href="http://www.mshxw.com/TAG_1/shuangyiliuxueke.html">双一流学科</a>
<a href="http://www.mshxw.com/TAG_1/zhuanshengben.html">专升本</a>
<a href="http://www.mshxw.com/TAG_1/wodexuexiao.html">我的学校</a>
<a href="http://www.mshxw.com/TAG_1/rijixuexiao.html">日记学校</a>
<a href="http://www.mshxw.com/TAG_1/xidianpeixunxuexiao.html">西点培训学校</a>
<a href="http://www.mshxw.com/TAG_1/qixiuxuexiao.html">汽修学校</a>
<a href="http://www.mshxw.com/TAG_1/qingshu.html">情书</a>
<a href="http://www.mshxw.com/TAG_1/huazhuangxuexiao.html">化妆学校</a>
<a href="http://www.mshxw.com/TAG_1/tagouwuxiao.html">塔沟武校</a>
<a href="http://www.mshxw.com/TAG_1/yixingmuban.html">异形模板</a>
<a href="http://www.mshxw.com/TAG_1/xinandaxuepaiming.html">西南大学排名</a>
<a href="http://www.mshxw.com/TAG_1/zuijingpirenshengduanju.html">最精辟人生短句</a>
<a href="http://www.mshxw.com/TAG_1/6bujiaonizhuihuibeipian.html">6步教你追回被骗的钱</a>
<a href="http://www.mshxw.com/TAG_1/nanchangdaxue985.html">南昌大学排名</a>
<a href="http://www.mshxw.com/TAG_1/qingchaoshierdi.html">清朝十二帝</a>
<a href="http://www.mshxw.com/TAG_1/beijingyinshuaxueyuanpaiming.html">北京印刷学院排名</a>
<a href="http://www.mshxw.com/TAG_1/beifanggongyedaxuepaiming.html">北方工业大学排名</a>
<a href="http://www.mshxw.com/TAG_1/beijinghangkonghangtiandaxuepaiming.html">北京航空航天大学排名</a>
<a href="http://www.mshxw.com/TAG_1/shoudoujingjimaoyidaxuepaiming.html">首都经济贸易大学排名</a>
<a href="http://www.mshxw.com/TAG_1/zhongguochuanmeidaxuepaiming.html">中国传媒大学排名</a>
<a href="http://www.mshxw.com/TAG_1/shoudoushifandaxuepaiming.html">首都师范大学排名</a>
<a href="http://www.mshxw.com/TAG_1/zhongguodezhidaxue(beijing)paiming.html">中国地质大学(北京)排名</a>
<a href="http://www.mshxw.com/TAG_1/beijingxinxikejidaxuepaiming.html">北京信息科技大学排名</a>
<a href="http://www.mshxw.com/TAG_1/zhongyangminzudaxuepaiming.html">中央民族大学排名</a>
<a href="http://www.mshxw.com/TAG_1/beijingwudaoxueyuanpaiming.html">北京舞蹈学院排名</a>
<a href="http://www.mshxw.com/TAG_1/beijingdianyingxueyuanpaiming.html">北京电影学院排名</a>
<a href="http://www.mshxw.com/TAG_1/zhongguohuquxueyuanpaiming.html">中国戏曲学院排名</a>
<a href="http://www.mshxw.com/TAG_1/hebeizhengfazhiyexueyuanpaiming.html">河北政法职业学院排名</a>
<a href="http://www.mshxw.com/TAG_1/hebeijingmaodaxuepaiming.html">河北经贸大学排名</a>
<a href="http://www.mshxw.com/TAG_1/tianjinzhongdeyingyongjishudaxuepaiming.html">天津中德应用技术大学排名</a>
<a href="http://www.mshxw.com/TAG_1/tianjinyixuegaodengzhuankexuejiaopaiming.html">天津医学高等专科学校排名</a>
<a href="http://www.mshxw.com/TAG_1/tianjinmeishuxueyuanpaiming.html">天津美术学院排名</a>
<a href="http://www.mshxw.com/TAG_1/tianjinyinlexueyuanpaiming.html">天津音乐学院排名</a>
<a href="http://www.mshxw.com/TAG_1/tianjingongyedaxuepaiming.html">天津工业大学排名</a>
<a href="http://www.mshxw.com/TAG_1/beijinggongyedaxuegengdanxueyuanpaiming.html">北京工业大学耿丹学院排名</a>
<a href="http://www.mshxw.com/TAG_1/beijingjingchaxueyuanpaiming.html">北京警察学院排名</a>
<a href="http://www.mshxw.com/TAG_1/tianjinkejidaxuepaiming.html">天津科技大学排名</a>
<a href="http://www.mshxw.com/TAG_1/beijingyoudiandaxue(hongfujiaoou)paiming.html">北京邮电大学(宏福校区)排名</a>
<a href="http://www.mshxw.com/TAG_1/beijingwanglaozhiyexueyuanpaiming.html">北京网络职业学院排名</a>
<a href="http://www.mshxw.com/TAG_1/beijingdaxueyixuebupaiming.html">北京大学医学部排名</a>
<a href="http://www.mshxw.com/TAG_1/hebeikejidaxuepaiming.html">河北科技大学排名</a>
<a href="http://www.mshxw.com/TAG_1/hebeidezhidaxuepaiming.html">河北地质大学排名</a>
<a href="http://www.mshxw.com/TAG_1/hebeitiyoxueyuanpaiming.html">河北体育学院排名</a>
</div>
</div>
</div>
<div class="footer">
<div class="dl_con">
<div class="width1200">
<dl>
<dt>学习工具</dt>
<dd><a href="https://www.mshxw.com/tools/algebra/" title="代数计算器">代数计算器</a></dd>
<dd><a href="https://www.mshxw.com/tools/trigonometry/" title="三角函数计算器">三角函数</a></dd>
<dd><a href="https://www.mshxw.com/tools/analytical/" title="解析几何">解析几何</a></dd>
<dd><a href="https://www.mshxw.com/tools/solidgeometry/" title="立体几何">立体几何</a></dd>
</dl>
<dl>
<dt>知识解答</dt>
<dd><a href="https://www.mshxw.com/ask/1033/" title="教育知识">教育知识</a></dd>
<dd><a href="https://www.mshxw.com/ask/1180/" title="百科知识">百科知识</a></dd>
<dd><a href="https://www.mshxw.com/ask/1155/" title="生活知识">生活知识</a></dd>
<dd><a class="https://www.mshxw.com/ask/1199/" title="常识知识">常识知识</a></dd>
</dl>
<dl>
<dt>写作必备</dt>
<dd><a href="https://www.mshxw.com/zuowen/1128/" title="作文大全">作文大全</a></dd>
<dd><a href="https://www.mshxw.com/zuowen/1130/" title="作文素材">作文素材</a></dd>
<dd><a href="https://www.mshxw.com/zuowen/1132/" title="句子大全">句子大全</a></dd>
<dd><a href="https://www.mshxw.com/zuowen/1154/" title="实用范文">实用范文</a></dd>
</dl>
<dl class="mr0">
<dt>关于我们</dt>
<dd><a href="https://www.mshxw.com/about/index.html" title="关于我们" rel="nofollow">关于我们</a></dd>
<dd><a href="https://www.mshxw.com/about/contact.html" title="联系我们" rel="nofollow">联系我们</a></dd>
<dd><a href="https://www.mshxw.com/sitemap/" title="网站地图">网站地图</a></dd>
</dl>
<div class="dl_ewm">
<div class="wx"> <img src="https://www.mshxw.com/skin/sinaskin//kaotop/picture/gzh.jpg" alt="交流群">
<p>名师互学网交流群</p>
</div>
<div class="wx"><img src="https://www.mshxw.com/skin/sinaskin//kaotop/picture/weixin.jpg" alt="名师互学网客服">
<p>名师互学网客服</p>
</div>
</div>
</div>
</div>
<div class="copyright">
<p>名师互学网 版权所有 (c)2021-2022 ICP备案号：<a href="https://beian.miit.gov.cn" rel="nofollow">晋ICP备2021003244-6号</a>
</p>
</div>
</div>
<!-- 手机端 -->
<div class="m_foot_top">
<img src="https://www.mshxw.com/foot.gif" width="192" height="27" alt="我们一直用心在做"><br/>
<a href="https://www.mshxw.com/about/index.html">关于我们</a>
<a href="https://www.mshxw.com/archiver/">文章归档</a>
<a href="https://www.mshxw.com/sitemap">网站地图</a>
<a href="https://www.mshxw.com/about/contact.html">联系我们</a>
<p>版权所有 (c)2021-2022 MSHXW.COM</p>
<p>ICP备案号：<a href="https://beian.miit.gov.cn/" rel="nofollow">晋ICP备2021003244-6号</a></p>
</div>
<div class="to_top" style="display:none;"><img src="https://www.mshxw.com/skin/sinaskin//kaotop/picture/to_top.png"></div>
<!--广告!-->
<script type="text/javascript" src="https://www.mshxw.com/skin/sinaskin//kaotop/js/top.js"></script>
<script src="https://www.mshxw.com/skin/sinaskin//kaotop/js/fixed.js" type="text/javascript"></script>
<!--头条搜索!-->
<script>
(function(){
var el = document.createElement("script");
el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?018f42187355ee18d1bfcee0487fc91a76ac6319beb05b7dc943033ed22c446d3d72cd14f8a76432df3935ab77ec54f830517b3cb210f7fd334f50ccb772134a";
el.id = "ttzz";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(el, s);
})(window)
</script>
<!--头条搜索结束!-->
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?e05fec1c87ee5ca07f1ce57d093866c4";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</div>
</div>
<script type="text/javascript">
$(".alert_kf").click(function() {
mantis.requestChat();
});
</script>
<script type="text/javascript">
var mySwiper_weixin = new Swiper('.pc_swiper_weixin', {
autoplay: 3000, //可选选项，自动滑动
loop: true,
speed: 1000,
pagination: '.swiper-pagination',
paginationClickable: true,
})
</script>
<script type="text/javascript">
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$(".to_top").fadeIn(1000);
} else {
$(".to_top").fadeOut(1000);
}
});
$(".to_top").click(function() {
if ($('html').scrollTop()) {
$('html').animate({
scrollTop: 0
}, 300);
return false;
}
$('body').animate({
scrollTop: 0
}, 300);
return false;
});
});
</script>
</body>
</html> 
