河南鄭州家鄉旅游網頁設計源代碼鄭州歷史文化名人網頁設計模板

州家鄉旅游網頁設計源代碼有五個頁面組成，帶留言表單。

網頁設計效果圖

鄭州家鄉旅游網頁設計首頁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>
                        鄭州是一座充滿魅力的城市，很多人的眼里鄭州是一座火車拉出來的城市，京廣線隴海線兩條大動脈的結合部。建國前的一個縣城，變成了省會。他的兩邊是曾經多個朝代的都城開封與洛陽?，F在的和平時代，為鄭州的發展帶來了潛力，這一塊曾經的四戰之地變成了騰飛的沃土。
                    </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小時內與您取得聯系。

整合營銷服務商

河南鄭州家鄉旅游網頁設計源代碼 鄭州歷史文化名人網頁設計模板