制作简易的风景网页

滴~学习卡

已于 2023-06-30 10:45:20 修改

阅读量1.5k

点赞数 2

分类专栏： html css 前端文章标签：风景 html css

于 2022-05-03 18:41:06 首次发布

本文链接：https://blog.csdn.net/weixin_49465267/article/details/124559398

版权

html 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

页面效果展示

以下为页面代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>蓟州</title>
<link href="css/Untitled-1.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
	background-image: url(img/beijing.jpg);
	background-repeat: repeat;
}
a {
	font-size: 24px;
	color: #0FC;
	font-weight: bold;
}
a:link {
	text-decoration: none;
	color: #030;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
</style>
</head>

<body>
<h1 align="center">蓟州区值一去的美景</h1>
<table width="1246" border="0">
  <tr>
    <td align="left"><marquee>
      如有错误请联系我们修改，邮箱:3054787236@qq.com
    </marquee></td>
  </tr>
</table>
<div align="center">
  <table border="0">
    <tr>
      <td width="300" height="70" align="center"><strong><a href="#P1">盘山</a></strong></td>
      <td width="300" height="70" align="center"><strong><a href="#C1">翠屏湖</a></strong></td>
      <td width="300" height="70" align="center"><a href="#p1">蓟州的精美图片</a></td>
    </tr>
  </table>
</div>
<h2 align="center"><a id="P1"></a>盘山</h2>
<p><strong>盘山始记于汉，兴于唐。极盛于清。历史上建有72座寺庙和13座玲珑宝塔，一座皇家园林──静寄山庄，早在唐代就以&ldquo;东五台山&rdquo;著称佛界，清康熙年间以&ldquo;京东第一山&rdquo;驰名中外，民国初年盘山同泰山、西湖、故宫等并列为中国十五大名胜之一。</strong></p>
<p><strong>清朝康熙皇帝进山9次，乾隆皇帝第一次巡游盘山时拍案称奇，情不自禁吟出：&ldquo;早知有盘山，何必下江南&rdquo;！</strong><strong></strong></p>
<p align="center"><img src="img/panshan.jpg" width="640" height="325"><img src="img/shan.jpg" width="640" height="325"></p>
<h2 align="center">&nbsp;</h2>
<h2 align="center"><strong><a id="C1"></a>翠屏湖</strong></h2>
<p align="left"><strong>登翠屏山俯瞰，烟波浩淼，水天一色；荡舟湖上，鸥浮上下，鱼戏东西。翠屏南岸，葡萄压枝，花果满园；西岸大堤横卧，绿树缘堤，远山如黛。翠屏湖盛产鱼虾，尤以金翅鲤鱼闻名天下。</strong></p>
<p align="left"><strong>于桥水库位于天津市蓟州区城东，是国家重点大型水库之一，水库坝址建于蓟运河左支流州河出口处。</strong></p>
<p align="center"><img src="img/cuipinghu.jpg" width="640" height="325"><img src="img/cuipinghhu.jpg" width="640" height="325"></p>
<p align="center">&nbsp;</p>

<p align="center"><a id="p1"></a>以下是蓟州的精美图片</p>
<article>
  <ul>
    <li class=" biangkuang p1"></li>
    <li class=" biangkuang p2"></li>
    <li class=" biangkuang p3"></li>
  </ul>
</article>
</html>

以下为css样式

@charset "utf-8";
/* CSS Document */

body h1 {
	font-family: 华文隶书;
	text-shadow:0 0 10px #66CCFF,0 0 20px #66CCFF,0 0 30px #66CCFF,0 0 70px #00FF00;
}
body h2 {
	font-family: 楷体;
}
p {
	font-family: 楷体;
	font-size: 24px;
}
body p {
	font-family: 楷体;
}
body div table tr {
	font-family:华文彩云 ;
}

article ul {
	margin: auto;
	width: 1100px;
	list-style-type: none;
}
article li {
	margin: 40px;
	float: left;
	width: 250px;
}
.p1 {
	background-image: url(../img/jizhou%20.png);
	background-repeat: no-repeat;
	background-position: center center;
}
.biangkuang {
	border: 6px solid #CFC;
	width:250px;
	height:150px;
	border-image:url(../img/450.png) 80 round;
	border-image-width:40px;
	border-image-outset:15px;
	background-size:cover;
	
}
.p2 {
	background-image: url(../img/jizhoua.png);
	background-repeat: no-repeat;
	background-position: center center;
}
.p3 {
	background-image: url(../img/jizhoub.png);
	background-repeat: no-repeat;
	background-position: center center;
}

css： xuigaiban

@charset "utf-8";
/* CSS Document */
header h1 {
	font-family:"华文琥珀"
	font-size: 50px;
	letter-spacing: 15px;
	text-align: center;
}
body div table tr {
	font-family:华文彩云 ;
	font-size:24pxstrong {
	font-size: 25px;
	color: #000;
}