序文

難易度: ⭐⭐ (中) - 演習を統合するために html5 と css3 を学習した友人に適しています
編集者: WebStorm

プロジェクト開始準備

プロジェクトファイル構造:
プロジェクトファイルの構造

Base.css はパブリックスタイルを保存するために使用されます。

body {
    
    
    font-family: "PingFangSCRegular";
}
.center-wrap {
    
        /* 版心 */
    width: 1152px;
    margin: 0 auto;
}
.clearfix {
    
     /* 清除浮动 */
    overflow: hidden;
}
.clearfix::after {
    
    
    content: '';
    display: block;
    clear: both;
    overflow: hidden;
}
.db {
    
    
    display: block;
}
.dib {
    
    
    display: inline-block;
}
.tac {
    
    
    text-align: center;
}

reset.css は、ラベルをリセットし、ラベルのデフォルトスタイルをクリアするために使用されます (インターネット上で他の人が書いたことを引用することはできますが、それにマークを付ける必要があります)。

/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

html{
    
    color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
    
    margin:0;padding:0}table{
    
    border-collapse:collapse;border-spacing:0}fieldset,img{
    
    border:0}address,caption,cite,code,dfn,em,strong,th,var{
    
    font-style:normal;font-weight:normal}ol,ul{
    
    list-style:none}caption,th{
    
    text-align:left}h1,h2,h3,h4,h5,h6{
    
    font-size:100%;font-weight:normal}q:before,q:after{
    
    content:''}abbr,acronym{
    
    border:0;font-variant:normal}sup{
    
    vertical-align:text-top}sub{
    
    vertical-align:text-bottom}input,textarea,select{
    
    font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{
    
    color:#000}#yui3-css-stamp.cssreset{
    
    display:none}a{
    
    text-decoration: none;}

Index.css は、このプロジェクトに固有のスタイルを保存するために使用されます
フォントはフォントアイコンを保存するために使用されます
必要な画像を画像フォルダに入れます
3 つの CSS ファイルをindex.html にインポートし、プロジェクトのタイトルと説明を記述します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>慕云游商城-机票,酒店,旅游</title>
    <meta name="Keywords" content="机票，酒店，旅游攻略，签证，出国，自由行">
    <meta name="Description" content="慕云游商城有10多年旅游行业经验，为您提供全方位旅游服务">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
</body>
</html>

ページ上部の開発

1. メインメニューとサブメニューの開発

ページトップのレイアウト分析:

詳細な説明:
ここに画像の説明を挿入

右側のドロップダウンボックスのある部分にはパブリッククラスの have-menu を指定でき、小さな矢印はボックスのパディング上に配置されます。
下向きの矢印は、大きなボックスに 2 つのボックスを入れてカバーを形成しています。両方のボックスは 45°回転しています。下のボックスは白、上のボックスは背景と同じ色です。上の値を調整することで、カバーは下矢印を形成し、マウスを移動すると、矢印の左側のテキストに到達した後、大きなボックスが 180 度回転され、トランジション効果が追加されます。

<em class="arrow">
	<b></b>
	<i></i>
</em>

.site-head .topbar .shortcut-link > ul > li.have-menu .arrow{
    
    
    position: absolute;
    right: 0;
    top:50%;
    margin-top: -6px;
    width: 12px;
    height: 12px;
    /*background-color: #978654;*/
}
.site-head .topbar .shortcut-link > ul > li.have-menu:hover .arrow{
    
    
    transform: rotate(180deg);
    transition: transform .2s ease 0s;

}
.site-head .topbar .shortcut-link > ul > li.have-menu .arrow b{
    
    
    position: absolute;
    left: 3px;
    top: 2px ;
    width: 6px;
    height: 6px;
    background-color: #fff;
    transform: rotate(45deg);
}
.site-head .topbar .shortcut-link > ul > li.have-menu .arrow i{
    
    
     position: absolute;
     left: 3px;
     top: 0.5px ;
     width: 6px;
     height: 6px;
     background-color: #2A2A2A;
     transform: rotate(45deg);
 }

逆三角形は疑似要素で構成されており、ボックスで十分です。マウスはアニメーション効果でホバリングされ、逆三角形は 180 度を選択して正三角形になります。

.site-head .main-nav ul li.have-menu::before{
    
    
    content: '';
    position: absolute;
    right: 0;
    top: 18px;
    width: 0;
    height: 0;
    border:5px solid transparent;
    border-bottom:none;
    border-top-color:white;
    transition: transform .5s ease 0s;
}
.site-head .main-nav ul li.have-menu:hover::before{
    
    
    transform: rotate(180deg);
}

最初に 2 番目のメニューを非表示にし、display: none 属性を使用して、マウスがホバーしたときに display: block を使用します。

2. フォントアイコンの使用

フォントアイコンライブラリに入ります: https://www.iconfont.cn/
目的のフォントアイコンを検索してライブラリに追加し、コードをダウンロードします (手順付き)。

メインページの開発

1. ビッグバナーのレイアウト

バナー部分

小さなアイコンは CSS スプライトテクノロジーで作成されています。これは、Web ページの読み込み速度を最適化する効果的な方法であり、HTTP リクエストの数を減らしてページの読み込み効率を向上させます。
右側のその他の部分は、JavaScript を学習してから作成してください

2. バーティカルメニュー開発

大きな箱で6つの小さな箱を包み、大きな箱の高さを100%、小さな箱の高さを16.66%に設定し、均等に分割して微調整します。
それぞれの小さなボックスの間には分割線があり、ボックスの一定の高さを占めます。box-sizing: border-box;attributeindex.html を忘れずに追加してください
。

 				<ul>
                    <li class="hot have-menu" data-t="hot">
                        <dl>
                            <dt>热门出发地</dt>
                            <dd>
                                <em>北京</em>
                                <em>上海</em>
                                <em>广深</em>
                                <em>西南</em>
                                <em>国内其他</em>
                            </dd>
                        </dl>
                    </li>
                    <li class="hk" data-t="hk">
                        <dl>
                            <dt>港澳台 国内</dt>
                            <dd>
                                <em>香港</em>
                                <em>澳门</em>
                                <em>台湾</em>
                                <em>国内其他</em>
                            </dd>
                        </dl>
                    </li>
                    <li class="jp" data-t="jp">
                        <dl>
                            <dt>日本 韩国</dt>
                            <dd>
                                <em>东京</em>
                                <em>大阪</em>
                                <em>冲绳</em>
                                <em>北海道</em>
                                <em>福冈</em>
                            </dd>
                        </dl>
                    </li>
                    <li class="as" data-t="as">
                        <dl>
                            <dt>东南亚南亚</dt>
                            <dd>
                                <em>泰国</em>
                                <em>新加坡</em>
                                <em>印尼</em>
                                <em>马来西亚</em>
                                <em>越南</em>
                            </dd>
                        </dl>
                    </li>
                    <li class="eu" data-t="eu">
                        <dl>
                            <dt>欧洲 美洲</dt>
                            <dd>
                                <em>英国</em>
                                <em>法国</em>
                                <em>美国</em>
                                <em>加拿大</em>
                            </dd>
                        </dl>
                    </li>
                    <li class="au" data-t="au">
                        <dl>
                            <dt>澳新 中东非</dt>
                            <dd>
                                <em>澳大利亚</em>
                                <em>新西兰</em>
                                <em>迪拜</em>
                            </dd>
                        </dl>
                    </li>
                </ul>

インデックス.css

.banner .center-wrap .banner-nav ul{
    
    
    /* 注意,这里的100%非常重要,如果忽略了,它的height就是0,那么它的子盒子设置16.6就没有意义了*/
    height: 100%;
}
.banner .center-wrap .banner-nav>ul>li{
    
    
	position: relative;
    height: 16.66%;
    width: 296px;
    background:rgba(0,0,0,.53);
    border-bottom: 1px solid #9e9e9e;
    /* 让heigtht属性是盒子的总高度*/
    box-sizing:border-box;
}
.banner .center-wrap .banner-nav>ul>li:last-child{
    
    
    border-bottom: none;
}
.banner .center-wrap .banner-nav>ul>li dl {
    
    
    position: absolute;
    height: 48px;
    top:50%;
    margin-top: -24px;
    padding-left: 42px;
    color: white;
}
.banner .center-wrap .banner-nav>ul>li dl dt {
    
    
    font-size: 18px;
}
 .banner .center-wrap .banner-nav>ul>li dl dt {
    
    
     font-size: 16px;
 }

3.フレッシュフリックパート

ここに画像の説明を挿入

マウスを写真の上に置くと、写真が拡大され、カード全体に影が付きます。大きなボックスは非表示になることに注意してください。

/* 鼠标触碰图片有放大效果*/
.content-part img{
    
    
    transition:transform .4s ease 0s;
}
.content-part img:hover{
    
    
    transform:scale(1.1);
}
.content-part li{
    
    
    overflow:hidden;
}
.content-part li .picbox{
    
    
    height: 184px;
    overflow: hidden;
}
/* 阴影效果 */
.xxsw .center-wrap ul li:hover{
    
    
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.20);
}

8 つのボックスはフローティングのままです。4 番目のボックスと 8 番目のボックスのマージン値を削除することに注意してください。以下を使用できます。 nth-child (4n) 子セレクター

.xxsw .center-wrap ul li{
    
    
    float: left;
    width: 264px;
    height: 270px;
    margin: 32px 32px 0 0;
}

.xxsw .center-wrap ul li:nth-child(4n){
    
    
    margin-right: 0;
}

4. マシンワインの自由移動部分

ここに画像の説明を挿入

右ナビゲーションバーは右フローティングを採用し、マウスをホバーするとフォントがプロジェクト標準の緑色になり、下枠が表示されます
a タグは個別にスタイル設定してブロック要素に変換する必要があることに注意してください。そうしないと、対応する効果が表示されません。

.common-style .center-wrap .title ul li a{
    
    
    color: rgba(0,0,0,0.85);
    display: inline-block;
}
.common-style .center-wrap .title ul li:hover a {
    
    
    color: #20BD9A;
    border-bottom: 4px solid #20BD9A;
    padding-bottom: 4px;
}

より多くのパーツの小さな矢印を表示します。マウスをこのボックスの上に置くと、上下にジャンプできます。

.content-part .bd .more-grid:hover .iconfont{
    
    
    animation: ud .4s ease 0s infinite alternate;
}
@keyframes ud {
    
    
    form{
    
    
        transform: translateY(-10px);
    }
    to{
    
    
        transform: translateY(10px);
    }
}

5. 地元のお楽しみコーナー

ここに画像の説明を挿入

メインコンテンツ部分は 3 つの大きなボックスに分割されており、左側にフローティングされています。3 番目のボックスもマージン値 (margin-right: 0;) を削除する必要があります。
199は強力なタグでラッピング可能
赤いビューの詳細部分は前のモジュールと非常によく似ており、パブリッククラスを作成し、色や幅などの固有の属性を設定できます。

6. パブリッククラスの利用

すべての要素で共有される属性をパブリッククラスに配置します。このパブリッククラスを直接追加するだけです。content-part と common-style は両方ともパブリッククラスです。

 <section class="jjzyx content-part common-style"><section>

7. トランジションと変形の実戦への応用

トランジションとトランスフォームは、Web ページにアニメーションとインタラクティブ性を追加する CSS の強力な機能です。実際のトランジションとモーフの一般的な使用例をいくつか示します。

マウスオーバー効果: トランジションプロパティを使用して、画像、ボタン、リンクなどの要素の上にマウスを置いたときにそれらの要素をスムーズに遷移させます。たとえば、背景色を透明から不透明に変更したり、画像を拡大したりするなどです。
ページ読み込みアニメーション: ページの読み込み中にトランジションと変換を適用することで、ユーザーに優れた視覚エクスペリエンスを提供できます。遷移プロパティを使用して要素の透明度、位置、サイズを制御したり、変換プロパティを使用して回転、拡大縮小、移動などの効果を実現したりできます。
コンテンツの折りたたみと展開: ユーザーがボタンまたはリンクをクリックしたときに、トランジション効果を使用してコンテンツ領域をスムーズに折りたたみまたは展開します。この効果は、変形プロパティの高さと透明度を組み合わせることによって実現できます。
轮播图效果：使用过渡和变形属性可以创建各种各样的轮播图效果，如淡入淡出、滑动切换或翻转效果。
进度条和加载动画：通过设置过渡效果和变形属性，可以创建进度条和加载动画，让用户知道正在进行某个任务或页面正在加载。
用户交互提示：在用户与网页进行交互时，可以通过过渡和变形效果来提供视觉反馈。例如，在按钮点击时使用过渡效果改变按钮颜色或大小，以应对用户的操作。

页脚开发

ここに画像の説明を挿入

第一行内容时两侧居中对齐的,所以要去掉左右两边的padding或者margin值,还有最后一个右边框也要去掉
第二行的内容可以用dl标签

			<div class="clearfix">
                    <dl class="txfw">
                        <dt >贴心服务</dt>
                        <dd>我们收集慕云游者的真实诉求，找寻特色旅行目的地，让慕云游者放心出行</dd>
                    </dl>
                    <dl class="ccsx">
                        <dt>层层筛选</dt>
                        <dd>对旅游产品供应商严格筛选，资质层层把关
                            为慕云游者挑选符合需求的旅行产品</dd>
                    </dl>
                    <dl class="axph">
                        <dt>安心陪护</dt>
                        <dd>对慕云游者的购买进行跟踪服务以及质量监控，生效投诉先行赔付，出现问题及时解决</dd>
                    </dl>
                </div>

总结

慕云游项目是一个基于HTML5和CSS3的静态网页开发项目。在项目中，使用了一些HTML5和CSS3的新功能和特性来创建一个具有现代化外观和交互性的网页。

使用语义化的HTML结构：在项目中，我们遵循了HTML5的语义化标签，如 <header>、<nav>、<main>、<section>、<article>、<footer>等来更好地描述页面的结构和内容。
CSS3过渡和动画效果：为了增强页面的动态性和交互性，我们使用了CSS3的过渡（transition）和动画（animation）效果。通过设置CSS属性的过渡效果和关键帧动画，我们实现了平滑的过渡和各种动画效果，例如淡入淡出、旋转、缩放和平移等。
渐变和阴影效果：通过CSS3的线性渐变（linear gradient）和径向渐变（radial gradient）特性，我们为背景、按钮等元素添加了渐变色效果，提升了页面的视觉吸引力。同时，还使用了CSS3的阴影属性来创建阴影效果，增加了元素的层次感和立体感。
字体图标与精灵技术：为了提高网页的加载性能和用户体验，我们使用了字体图标代替部分图片，减少了网络请求并加快了页面加载速度。
利用CSS3的伪类选择器和过渡效果，为表单元素提供了更好的交互效果和用户反馈。

ソースリンク: https://pan.baidu.com/s/1ftwBYKbTdA6o0bYxG70d0w?pwd=zujj
抽出コード: zujj

HTML5+CSS3 静的 Web ページ開発 —— Muyunyou Project

目次

序文

プロジェクト開始準備

ページ上部の開発

1. メインメニューとサブメニューの開発

2. フォントアイコンの使用

メインページの開発

1. ビッグバナーのレイアウト

2. バーティカルメニュー開発

3.フレッシュフリックパート

4. マシンワインの自由移動部分

5. 地元のお楽しみコーナー

6. パブリッククラスの利用

7. トランジションと変形の実戦への応用

页脚开发

总结

おすすめ