河南郑州家乡旅游网页设计源代码郑州历史文化名人网页设计模板

州家乡旅游网页设计源代码有五个页面组成，带留言表单。

网页设计效果图

郑州家乡旅游网页设计首页html代码



<!DOCTYPE html>

<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的家乡</title>
    <link rel="stylesheet" href="css/public.css">
</head>

<body>
    <!-- 最外层大盒子 -->
    <div id="home">
        <!-- 顶部banner图 -->
        <div id="banner_img">
            <!-- 图片 -->
            <img src="images/hombanner.png" alt="">
            <!-- 文字 -->
            <div id="title">
                <p>郑州</p>
                <span>
                    我的家乡
                </span>
            </div>
        </div>
        <!-- 中间内容区域 -->
        <div id="home_mid">
            <!-- 左侧导航栏 -->
            <div id="left_bar">
                <ul>
                    <li>
                        <a class="index_style" href="index.html">网站首页</a>
                    </li>
                    <li>
                        <a href="history.html">历史沿革</a>
                    </li>
                    <li>
                        <a href="landscape.html">风景名胜</a>
                    </li>
                    <li>
                        <a href="people.html">历史名人</a>
                    </li>
                    <li>
                        <a href="liuyan.html">在线留言</a>
                    </li>
                </ul>
            </div>
            <!-- 右侧图文内容 -->
            <div id="right_text">
                <h1 id="first_title">郑州的故事</h1>
                <div id="mid_txt">
                    <p>
                        郑州是一座充满魅力的城市，很多人的眼里郑州是一座火车拉出来的城市，京广线陇海线两条大动脉的结合部。建国前的一个县城，变成了省会。他的两边是曾经多个朝代的都城开封与洛阳。现在的和平时代，为郑州的发展带来了潜力，这一块曾经的四战之地变成了腾飞的沃土。
                    </p>
                    <img class="bg1" src="images/bg1.png" alt="aaa">
                    <p>
                        郑州是全国重要的铁路、航空、电力、邮政电信主枢纽城市，拥有亚洲作业量最大的货车编组站（郑州枢纽中的郑州北站、郑州北编组站，是亚洲最繁忙的铁路客货运枢纽编组站）。是中国唯一一个国家级航空港经济综合实验区，郑州商品交易所是中国首家期货交易所，郑州也是中国（河南）核心组成部分。
                    </p>
                    <p>
                        由于交通便利，郑州成为了全国重要的棉纺织基地，一下子建了六个在棉纺织厂。聚集了从西北过来的生产资料，和江浙地带过来的技术工人。同时由于郑州周边盛产磨料磨具的原材料。中国第二砂轮厂，就建在了郑州。大批从东北过来的产业工人和技术人员，也在此处落户。南来北往的人们在此聚集，郑州成了一个典型的移民城市！大量的轻工业人口来自江浙，重工业人口来自东北！而恰恰是这样，由部分本地人和大量外来人组成的城市结构，决定了郑州是个具有极强包容性的城市，思想文化，饮食等方面，样样兼容。
                    </p>
                </div>
                <h1>郑州的秀色
                    <a href="index.html">查看更多></a>
                </h1>
                <ul id="fengjing">
                    <li>
                        <img src="images/f1.png" alt="">
                        <p>
                            皇帝故里
                        </p>
                    </li>
                    <li>
                        <img src="images/f2.png" alt="">
                        <p>
                            嵩山
                        </p>
                    </li>
                    <li>
                        <img src="images/f3.png" alt="">
                        <p>
                            城隍庙-文庙
                        </p>
                    </li>
                    <li>
                        <img src="images/f4.png" alt="">
                        <p>
                            观星台
                        </p>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 底部展示图片 -->
        <div id="bottom_img">
            <img src="./index_files/banner3.png" alt="">
        </div>
        <!-- 底部版权栏目 -->
        <footer>
            <p>
              河南郑州
            </p>
        </footer>
    </div>


<div>
</div>
</body>
</html>

更多网页设计源代码查看：HTML5网页设计成品作业模板

茅台集网页设计要是用HTML DIV+CSS JS等来完成页面的排版设计。

网页有搜素框导航栏 js图片轮播；

网页由网站首页，公司简介，公司发展历程，最新新闻动态组成；

具体效果图展示：

面

在现代网页设计中，个人主页是一个展示个人信息、技能、事件等的重要载体。为了吸引访客的注意力并提供良好的用户体验，设计师通常会运用各种技巧和效果来增加页面的吸引力。本文将介绍如何使用CSS创建一个惊叹的个人主页介绍卡片，展示独特魅力；

PREVIEW

创建HTML结构

首先，需要定义基本的HTML结构来容纳个人主页介绍卡片；

这里外层使用一个div包裹，里面使用三个<div>元素作为包裹容器布局，并在其中添加所需的图像、内容和按钮等：

<div class="card">
  <div class="box">
    <div class="img_box">
      <video 
        src="./assets/video.mp4"
        muted
        autoplay
        loop
      />
    </div>
  </div>

  <div class="box">
    <div class="content">
      <h2>
        Alexa
        <br>
        <span>
          Professional Artist
        </span>
      </h2>

      <ul>
        <li>
          Posts
          <span>22</span>
        </li>
        <li>
          Followers
          <span>999+</span>
        </li>
        <li>
          Following
          <span>7</span>
        </li>
      </ul>

      <button>Follow</button>
    </div>
  </div>

  <div class="circle">
    <div class="img_box">
      <img src="./assets/user.jpg" alt="">
    </div>
  </div>
</div>

外层是card容器，视频和文本内容区域是上下布局的，分别使用box容器包裹，最后是circle容器包裹头像在定位在中间左边超出；

注：
video设置属性：静音(muted)可实现自动播放(autoplay)，接着设置循环播放(loop)；
img>和video>的父容器是一个类名img_box；

添加元素样式

接下来，我们将使用CSS来为个人主页介绍卡片添加样式。以下是一些关键的样式属性和技巧，可以使卡片看起来更加漂亮和吸引人；

Base CSS

使用通配符选择器*来为页面中的所有元素设置相同的样式，清除默认样式，使用怪异盒子模型；
选择文档的根元素（HTML中的 <html>）定义颜色CSS变量；
body使用flex把card容器布局在页面水平、垂直居中；
card使用flex把三个子容器实现垂直排列并两端对齐；

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --clr: #083d41
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: var(--clr);
}

.card {
  background-color: var(--clr);
  position: relative;

  width: 320px;
  height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 先把容器基本样式调整一下 */
.card .box {
  background-color: tomato;
  position: relative;
  
  width: 110%;
  height: 200px;
  /* 文本内容区域圆角 */
  border-radius: 20px;
}

/* 头像容器则使用定位布局 */
.card .circle {
  width: 180px;
  height: 180px;
  position: absolute;
  left: -70px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  border: 10px solid var(--clr);
}

/* 调整img和video共有的父容器样式 */
.card .box .img_box,
.card .circle .img_box {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* img的圆角 */
  border-radius: 50%; 
}
.card .box .img_box {
  /* video的圆角 */
  border-radius: 15px;
}

/* 调整图片和视频的样式 */
.card .box .img_box video,
.card .circle .img_box img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

视频区域CSS

调整card下的第一个box容器样式，也就是包裹视频的容器：

包围图片的边框部分，优化成圆角使其看上去不是那么突兀；
使用::before，::after创建两个伪元素用于需要优化的两角；
设置伪元素的左下角边框圆角程度与box保持一致，当然也可以自行调整；
最后给伪元素添加阴影效果覆盖住box的角，然后阴影颜色设置为与背景色一致，就能实现了：属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色；比如本次设置的值对应：X轴偏移-6px Y轴偏移6px 颜色；

.card .box:nth-child(1)::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: transparent;
  
  position: absolute;
  z-index: 10;
  top: 106px;
  left: -1px;
  border-bottom-left-radius: 20px;
  box-shadow: -6px 6px var(--clr);
}

/* 样式同before类似，注意定位样式 */
.card .box:nth-child(1)::after {
  content: "";
  width: 20px;
  height: 20px;
  background-color: transparent;
  
  position: absolute;
  z-index: 10;
  bottom: -1px;
  left: 105px;
  border-bottom-left-radius: 20px;
  box-shadow: -6px 6px var(--clr);
}

目前添加样式效果图，可以在调试阶段更改明显色彩用于调整距离、位置等；

文本内容CSS

调整card下的第二个box容器样式，也就是包含文字信息的容器：

包围图片的边框部分，优化成圆角样式同上面类似，部分需要调整的看代码；
注意这里设置的是伪元素的左上角圆角程度，然后添加阴影颜色实现；
此外，还对卡片内部的标题、段落和列表应用了特定的样式，以使其在视觉上更加吸引人；

.card .box:nth-child(2) {
  background-color: #fff;

  width: 100%;
  height: 220px;
}

.card .box:nth-child(2)::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: transparent;

  position: absolute;
  z-index: 10;
  bottom: 106px;
  left: -1px;
  border-top-left-radius: 20px;
  box-shadow: -6px -6px var(--clr);
}
.card .box:nth-child(2)::after {
  content: "";
  width: 20px;
  height: 20px;
  background-color: transparent;

  position: absolute;
  z-index: 10;
  top: -1px;
  left: 109px;
  border-top-left-radius: 20px;
  box-shadow: -6px -6px var(--clr);
}

.card .box .content {
  position: absolute;
  inset: 0;
  padding: 30px 10px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* 姓名和Title样式 */
.card .box .content h2 {
  width: 100%;
  padding-left: 120px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.1em;
  font-size: 1.15em;
  font-weight: 600;
  color: #333;
}
.card .box .content h2 span {
  letter-spacing: 0.05em;
  font-size: 0.75em;
  font-weight: 400;
  color: tomato;
  text-transform: initial;
}

/* 列表样式 */
.card .box .content ul {
  position: relative;
  top: 15px;

  width: 100%;
  padding: 0 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.card .box .content ul li {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 10px;
  font-size: 0.85em;
  font-weight: 500;
  color: #999;
}
.card .box .content ul li:not(:last-child)
{
 border-right: 1px solid #ccc; 
}
.card .box .content ul li span{
  font-size: 1.65em;
  color: #333;
}

/* 按钮样式 */
.card .box .content button {
  position: relative;
  top: 25px;
  padding: 8px 30px;
  border: none;
  outline: none;
  background-color: #03a9f4;
  border-radius: 30px;
  color: #fff;
  font-size: 1em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  border: 5px solid var(--clr);
  box-shadow: 0 0 0 10px #fff;
  transition: .5s;
}
.card .box .content button:hover {
  letter-spacing: 0.5em;
  background-color: #ff3d7f;
}

进一步优化

由于按钮的圆角与文本内容卡片的交界处看上去显得有些过于突兀了；所以现在把它们的交界处优化成弧形，样式类似box的伪元素，这里也给按钮创建两个伪元素，用于优化两边的交界处：

.card .box .content button::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: transparent;
  position: absolute;
  top: 23px;
  left: -29px;
  border-top-right-radius: 20px;
  box-shadow: 5px -7px #fff;
}

.card .box .content button::after {
  content: "";
  width: 20px;
  height: 20px;
  background-color: transparent;
  position: absolute;
  top: 23px;
  right: -29px;
  border-top-left-radius: 20px;
  box-shadow: -5px -7px #fff;
}

最后

除了基本样式之外，还进一步优化个人主页介绍卡片的细节。一些可选的技巧包括：

添加过渡效果：通过为button的容器元素添加过渡效果，使卡片在鼠标悬停时平滑地改变样式(背景色、字符间距)；
使用伪元素添加box-shadow技巧覆盖比较突兀的地方，使各个元素之间的交界处有过渡感，可以增加视觉上的吸引力；
通过给元素设置与body背景相同的颜色，可以使其在页面中更加突出和立体；

通过运用CSS的各种样式属性和技巧，我们可以轻松地创建漂亮的个人主页介绍卡片。这些卡片不仅能够有效地展示个人信息和技能，还能够吸引访客的注意力并提供良好的用户体验。记得尝试不同的样式和效果来定制你自己独特的个人主页卡片！

CSS创作个人主页介绍卡片，展示独特魅力
原文链接：https://juejin.cn/post/7260709771870060603

在线咨询

上一篇：一文读懂HTML和CSS的关系
下一篇：HTML培训：如何在HTML中更改文本大小

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

河南郑州家乡旅游网页设计源代码 郑州历史文化名人网页设计模板