简单的静态网页（宠物网）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>宠物网首页</title><link href="CSS/PetPage.css" rel="stylesheet">
</head>
<body><!--头部--><div id="header"></div><!--导航--><div id="nav"><ul><li><a href="#" class="select">HOME</a></li><li><a href="#">ABOUT US</a></li><li><a href="#">SERVCES</a></li><li><a href="#">GALLERY</a></li><li><a href="#">CONTACT</a></li></ul></div><!--列表--><div id="list"><!--宠物--><div class="don"><img src="Images/pic.jpg"><p>Such stories set us thinking, wondering what we should do under similar circumstances. What events, what experiences, what associations should we crowd into those last hours as mortal beings, what regrets?</p><a href="#">read more</a></div><div class="don"><img src="Images/pic.jpg"><p>Such stories set us thinking, wondering what we should do under similar circumstances. What events, what experiences, what associations should we crowd into those last hours as mortal beings, what regrets?</p><a href="#">read more</a></div><div class="don"><img src="Images/pic.jpg"><p>Such stories set us thinking, wondering what we should do under similar circumstances. What events, what experiences, what associations should we crowd into those last hours as mortal beings, what regrets?</p><a href="#">read more</a></div><div class="don"><img src="Images/pic.jpg"><p>Such stories set us thinking, wondering what we should do under similar circumstances. What events, what experiences, what associations should we crowd into those last hours as mortal beings, what regrets?</p><a href="#">read more</a></div><div class="don"><img src="Images/pic.jpg"><p>Such stories set us thinking, wondering what we should do under similar circumstances. What events, what experiences, what associations should we crowd into those last hours as mortal beings, what regrets?</p><a href="#">read more</a></div><div class="don"><img src="Images/pic.jpg"><p>Such stories set us thinking, wondering what we should do under similar circumstances. What events, what experiences, what associations should we crowd into those last hours as mortal beings, what regrets?</p><a href="#">read more</a></div><div class="don"><img src="Images/pic.jpg"><p>Such stories set us thinking, wondering what we should do under similar circumstances. What events, what experiences, what associations should we crowd into those last hours as mortal beings, what regrets?</p><a href="#">read more</a></div><div class="don"><img src="Images/pic.jpg"><p>Such stories set us thinking, wondering what we should do under similar circumstances. What events, what experiences, what associations should we crowd into those last hours as mortal beings, what regrets?</p><a href="#">read more</a></div><div class="don"><img src="Images/pic.jpg"><p>Such stories set us thinking, wondering what we should do under similar circumstances. What events, what experiences, what associations should we crowd into those last hours as mortal beings, what regrets?</p><a href="#">read more</a></div><div class="don"><img src="Images/pic.jpg"><p>Such stories set us thinking, wondering what we should do under similar circumstances. What events, what experiences, what associations should we crowd into those last hours as mortal beings, what regrets?</p><a href="#">read more</a></div><div class="don"><img src="Images/pic.jpg"><p>Such stories set us thinking, wondering what we should do under similar circumstances. What events, what experiences, what associations should we crowd into those last hours as mortal beings, what regrets?</p><a href="#">read more</a></div><div class="don"><img src="Images/pic.jpg"><p>Such stories set us thinking, wondering what we should do under similar circumstances. What events, what experiences, what associations should we crowd into those last hours as mortal beings, what regrets?</p><a href="#">read more</a></div></div><!--尾部--><div id="footer"><h2>CONTACT US</h2><ul><li><img src="Images/fb.png"></li><li><img src="Images/g+.png"></li><li><img src="Images/rss.png"></li><li><img src="Images/tw.png"></li></ul></div>
</body>
</html>

/*使用外部字体*/
@font-face {font-family: BebasNeue-webfont;src: url("../fonts/BebasNeue-webfont.ttf");
}
*{padding: 0px;margin: 0px;
}
a{text-decoration: none;color: black;
}ul{list-style: none;
}body{background: url("../Images/pattern.gif");font-family: "BebasNeue-webfont";
}#header{background-color: red;height: 3px;
}#nav{text-align: center;/*margin: 0px auto;*/
}#nav ul{/*background-color: red;*/display: inline-block;
}#nav ul li{float: left;/*width: 200px;*/}#nav ul li a{display: inline-block;color: white;margin-right: 20px;font-size: 40px;width: 200px;/*background-color: green;*/text-align: center;
}
#nav ul li a:hover{background-color: white;color: black;
}
#nav ul li a.select{background-color: white;color: black;
}#list{background: white;text-align: center;margin-top: 30px;
}#list .don{/*background-color: blue;*/width: 382px;display: inline-block;margin: 20px;text-align: left;
}#list .don p{color: #999;font-family: "sans-serif";
}#list .don a{background: #C0392B;color: white;display: inline-block;width: 170px;height: 40px;line-height: 40px;font-size: 30px;text-align: center;
}#list .don a:hover{background: rgb(11,17,15);
}#footer{text-align: center;margin-bottom: 30px;
}#footer h2{color: white;margin: 5px 0px;font-size: 30px;
}#footer ul li{display: inline-block;margin-right: 10px;
}#footer ul li:hover{/**/opacity: 0.6;
}/*响应式设计*/
@media  screen and (max-width:1153px ){#nav ul li a{width: 150px;font-size: 30px;}
}@media  screen and (max-width:873px ){#nav ul li a{width: 100px;font-size: 25px;}
}@media  screen and (max-width:688px ){#nav ul li a{width: 80px;font-size: 20px;}
}

转载于:https://www.cnblogs.com/lantu1989/p/5879475.html

简单的静态网页（宠物网）相关推荐

大一可能用到的使用HTML+CSS做成简单的静态网页
大一可能用到的使用HTML+CSS做成简单的静态网页不知道你们大一学html和css没有,哈哈.要是老师负责还好,要是不负责就jj了,期末,期中可能就要交课程报告了,希望能帮到你.! 我就做了一个简 ...
html+css 简单的静态网页小米官网
html+css简单静态小米官网把之前做的改进了一下,其他的都是一样的布局效果图: 新增了一些字体文件不多说上代码 HTML代码: ```html <!DOCTYPE html> & ...
python爬虫如何从一个页面进入另一个页面-Python爬虫（一）：爬取一个简单的静态网页...
版本:python3.7 平台:windows10 工具 :pycharm 断断续续学习了py3爬虫2周左右的时间,发现自己学习的过于零散化,所以想通过这个专栏系统的整理下自己所学过的知识.如有错误, ...
python 简单网页_Python爬虫（一）：爬取一个简单的静态网页
版本:python3.7 平台:windows10 工具 :pycharm 断断续续学习了py3爬虫2周左右的时间,发现自己学习的过于零散化,所以想通过这个专栏系统的整理下自己所学过的知识.如有错误, ...
一种非常简单的静态网页生成方法介绍
一.目前的静态页生成方法有简单的模板替换.常见的ASP+FSO等,这里给大家介绍一种更简单的方法.原理就是借助XMLHTTP对象获取目标页面的源代码,然后写入到静态网页文件中.代码如下: Code D ...
用html和css构建简单的静态网页
目录一.效果展示 1.首页 2.剧情简介 3.主要人物 4.悬赏金海报 5.经典语录二.具体实现 1.首页 2.剧情简介 3.主要人物 4.悬赏金海报 5.简单语录三.主要问题四.总结只用h ...
HTML5+CSS期末大作业：个人博客网站设计——个人博客(7页) 学生DW网页设计作业成品 web课程设计网页规划与设计简单的静态网页制作
HTML5+CSS期末大作业:个人主页/个人介绍网站设计--个人博客(7页) 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作业题材有个人. 美食. 公 ...
python入门代码示例-Python入门简单的静态网页爬虫3.0 (爬虫的示例代码）
一.需求分析爬取百度词条Python页面的相关100个页面,分析目标:分析(url格式数据格式网页编码 ).url格式限定了爬取的网页格式避免一些不相干的网页的爬取.数据格式主要是内容中相关的标 ...
html 当当网页面,静态网页当当网（HTML源码）
[实例简介] 购物网站当当网包含首页,登录界面,注册界面,购物车等的HTML和CSS及脚本. [实例截图] [核心代码] 34wwyk └── 当当网 ├── css │ ├── global.c ...
python爬漫画（1）—— 如何爬取简单静态网页的图片
之前写了一个python爬虫爬漫画视频的小程序,在此以一个系列的方式对其中用到的技术进行一个记录系列一.简单的静态网页爬取这里取的是kuku漫画网,http://comic.kukudm.com ...

简单的静态网页（宠物网）

简单的静态网页（宠物网）相关推荐

最新文章

热门文章