州家鄉旅游網頁設計源代碼有五個頁面組成,帶留言表單。
網頁設計效果圖
<!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>
茅臺集網頁設計要是用HTML DIV+CSS JS等來完成頁面的排版設計。
網頁有搜素框 導航欄 js圖片輪播;
網頁由網站首頁,公司簡介,公司發展歷程,最新新聞動態組成;
具體效果圖展示:
在現代網頁設計中,個人主頁是一個展示個人信息、技能、事件等的重要載體。為了吸引訪客的注意力并提供良好的用戶體驗,設計師通常會運用各種技巧和效果來增加頁面的吸引力。本文將介紹如何使用CSS創建一個驚嘆的個人主頁介紹卡片,展示獨特魅力;
首先,需要定義基本的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來為個人主頁介紹卡片添加樣式。以下是一些關鍵的樣式屬性和技巧,可以使卡片看起來更加漂亮和吸引人;
* {
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;
}
調整card下的第一個box容器樣式,也就是包裹視頻的容器:
.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);
}
目前添加樣式效果圖,可以在調試階段更改明顯色彩用于調整距離、位置等;
調整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;
}
除了基本樣式之外,還進一步優化個人主頁介紹卡片的細節。一些可選的技巧包括:
通過運用CSS的各種樣式屬性和技巧,我們可以輕松地創建漂亮的個人主頁介紹卡片。這些卡片不僅能夠有效地展示個人信息和技能,還能夠吸引訪客的注意力并提供良好的用戶體驗。記得嘗試不同的樣式和效果來定制你自己獨特的個人主頁卡片!
CSS創作個人主頁介紹卡片,展示獨特魅力
原文鏈接:https://juejin.cn/post/7260709771870060603
*請認真填寫需求信息,我們會在24小時內與您取得聯系。