HTML+CSS简单网页练习
前言
运用了CSS进行简单的网页制作
一、效果图
二、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">常见问题FQAp>
<p class="p-Four-Module-Five" style="margin-top: 30px">深圳市汇聚众和发展科技有限公司p>
<p class="p-Four-Module-Five">服务热线400-633-7922p>
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-Tp>
<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 S200p>
<p class="p-two-Module-Six">尚PAD S100p>
<p class="p-two-Module-Six">尚PAD SH-Q7p>
<p class="p-two-Module-Six">尚PAD SH-Q5p>
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">常见问题FQAp>
<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">Googlep>
<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