前言
运用了CSS进行简单的网页制作
一、效果图
二、HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手机</title>
<script type="application/javascript">
alert("欢迎—>" + prompt("请输入你的姓名") + "<—访问本页面");//弹出对话框
</script>
<link rel="stylesheet" href="CSS/Module-one.css">
<link rel="stylesheet" href="CSS/Module-two.css">
<link rel="stylesheet" href="CSS/Module-three.css">
<link rel="stylesheet" href="CSS/Module-four.css">
<link rel="stylesheet" href="CSS/Module-five.css">
<link rel="stylesheet" href="CSS/Module-six.css">
</head>
<body>
<div>
<div class="KJ">
<img src="images/logo.png" class="PhotoOne">
<div class="FD">
<button class="PhotoThree" id="dianJi"></button>
<input type="text" class="PhotoTwo">
</div>
</div>
</div>
<div class="div-background-Module-Two">
<div class="div-KJ-Module-Two">
<div class="div-text-Module-Two">
<span class="span-line-Module-Two">首页</span>
<img src="images/nav-line.png" style="float: right">
</div>
<div class="div-text-Module-Two">
<span class="span-line-Module-Two">智能手机</span>
<img src="images/nav-line.png" style="float: right">
</div>
<div class="div-text-Module-Two">
<span class="span-line-Module-Two">平板电脑</span>
<img src="images/nav-line.png" style="float: right">
</div>
<div class="div-text-Module-Two">
<span class="span-line-Module-Two">配件</span>
<img src="images/nav-line.png" style="float: right">
</div>
<div class="div-text-Module-Two">
<span class="span-line-Module-Two">服务支持</span>
<img src="images/nav-line.png" style="float: right">
</div>
<div class="div-text-Module-Two">
<span class="span-line-Module-Two">关于尚合</span>
<img src="images/nav-line.png" style="float: right">
</div>
</div>
</div>
<div>
<div class="div-KJ-Module-Three">
<img src="images/banner.png">
</div>
</div>
<div class="div-WKJ-Module-Four">
<div class="div-KJ-Module-Four">
<div class="div-text-Module-Four">
<h5 style="float: left;padding-top: 6px">最新公告：</h5>
<span class="span-text-Module-Four">
尚合Aone智能手机入网证已经获工信部门审批下发。尚合官方
</span>
</div>
<div class="div-image-Module-Four">
<img src="images/share.png" class="img-Module-Four">
</div>
</div>
</div>
<div>
<div class="div-KJ-Module-Five">
<div class="div-One-Module-Five">
<div class="div-text-Module-Five">
<img src="images/arrow.png" style="padding-left: 10px">
<span class="span-text-Module-Five">新品发布</span>
</div>
<img src="images/pic.png" class="images">
</div>
<div class="div-Two-Module-Five">
<div class="div-text-Module-Five">
<img src="images/arrow.png" style="padding-left: 10px">
<span class="span-text-Module-Five">新闻中心</span>
</div>
<p class="p-one-Module-Five">致歉公告</p>
<p class="p-two-Module-Five">首批尚合Aone已全部售罄！</p>
<p class="p-two-Module-Five">【媒体报道】国产高性价比 尚合Aone四核手机评测</p>
<p class="p-two-Module-Five">我司产品已经通过了国家强制性产品3C认证</p>
<p class="p-two-Module-Five">尚合Aone智能手机入网证已经获工信部门审批下发</p>
<p class="p-two-Module-Five">我司通过ISO9001:2008国际质量管理体系认证</p>
</div>
<div class="div-Three-Module-Five">
<div class="div-text-Module-Five">
<img src="images/arrow.png" style="padding-left: 10px">
<span class="span-text-Module-Five">技术与支持</span>
</div>
<p class="p-Three-Module-Five" style="margin-top: 10px">售后服务</p>
<p class="p-Three-Module-Five">投诉与建议</p>
<p class="p-Three-Module-Five">联保网点</p>
<p class="p-Three-Module-Five">常见问题FQA</p>
<p class="p-Four-Module-Five" style="margin-top: 30px">深圳市汇聚众和发展科技有限公司</p>
<p class="p-Four-Module-Five">服务热线400-633-7922</p>
</div>
</div>
<div style="background: #1C1C1C">
<div class="div-KJ-Module-Six">
<div class="div-One-Module-Six">
<p class="p-one-Module-Six">尚合首页</p>
<p class="p-three-Module-Six">返回首页</p>
</div>
<div class="div-One-Module-Six">
<p class="p-one-Module-Six">智能手机</p>
<p class="p-three-Module-Six">Aone-T</p>
<p class="p-two-Module-Six"></p>
</div>
<div class="div-One-Module-Six">
<p class="p-one-Module-Six">平板电脑</p>
<p class="p-three-Module-Six">尚PAD S200</p>
<p class="p-two-Module-Six">尚PAD S100</p>
<p class="p-two-Module-Six">尚PAD SH-Q7</p>
<p class="p-two-Module-Six">尚PAD SH-Q5</p>
</div>
<div class="div-One-Module-Six">
<p class="p-one-Module-Six">配件中心</p>
<p class="p-three-Module-Six">Aone智能手机</p>
</div>
<div class="div-One-Module-Six">
<p class="p-one-Module-Six">服务与支持</p>
<p class="p-three-Module-Six">售后服务</p>
<p class="p-two-Module-Six">投诉与建议</p>
<p class="p-two-Module-Six">联保网点</p>
<p class="p-two-Module-Six">常见问题FQA</p>
<p class="p-two-Module-Six">订单查询</p>
<p class="p-two-Module-Six">下载专区</p>
</div>
<div class="div-One-Module-Six">
<p class="p-one-Module-Six">关于我们</p>
<p class="p-three-Module-Six">公司介绍</p>
<p class="p-two-Module-Six">企业文化</p>
<p class="p-two-Module-Six">工作机会</p>
<p class="p-two-Module-Six">法律声明</p>
<p class="p-two-Module-Six">行业动态</p>
</div>
<div class="div-One-Module-Six">
<p class="p-one-Module-Six">新闻中心</p>
<p class="p-three-Module-Six">公司新闻</p>
<p class="p-two-Module-Six">媒体报道</p>
<p class="p-two-Module-Six">行业动态</p>
</div>
<div class="div-One-Module-Six">
<p class="p-one-Module-Six">常用链接</p>
<p class="p-three-Module-Six">百度</p>
<p class="p-two-Module-Six">Google</p>
<p class="p-two-Module-Six">新浪微博</p>
</div>
</div>
</div>
</div>
</body>
</html>
三、源码以及CSS
源码什么的已经分享到百度云盘了，有需要随便拿
链接: https://pan.baidu.com/s/1qGWChIDBvNfc37td4-osrQ
提取码: gsyc
总结
第一次用HTML和CSS制作网页，虽然内容没有太多元素，但感觉还是挺不错了，一步一个脚印记录学习路程。XD
4190
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
