Table of contents
foreword
Difficulty: ⭐⭐ (medium) - suitable for friends who have learned html5 and css3 to consolidate exercises
Editor: WebStorm
Project start preparation
Project file structure:
- base.css is used to store public styles:
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 is used to reset the label and clear the default style of the label (you can quote what someone else wrote on the Internet, but you need to mark it):
/*
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 is used to store styles unique to this project
- fonts is used to store font icons
- Put the desired images into the images folder
- Import the three css files into index.html, and write the project title and description. As follows:
<!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>
Development at the top of the page
1. Head and secondary menu development
Page Top Layout Analysis:
Detailed Description:
- The part with the drop-down box on the right can give a public class have-menu, and the small arrow is positioned on the padding of the box
- The down arrow is made by putting two boxes in a large box to form a cover. Both boxes are rotated 45°. The lower box is white, and the upper box is the same color as the background. By adjusting the top value, the cover forms a down arrow. When the mouse moves After reaching the text on the left of the arrow, the big box is rotated 180°, and a transition effect is added.
<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);
}
- The inverted triangle is made of pseudo elements, a box is enough, the mouse hovers with animation effect, and the inverted triangle selects 180° to become a regular triangle
.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);
}
- The secondary menu is hidden first, use the display: none attribute, and display: block when the mouse hovers;
2. Use of Font Icons
- Enter the font icon library: https://www.iconfont.cn/
- Search for the desired font icon, add it to the library, and download the code (with instructions)
Main page development
1. The layout of the big banner
- Small icons are made with CSS sprite technology - an effective way to optimize webpage loading speed, which improves page loading efficiency by reducing the number of HTTP requests
- More parts on the right, write after learning JavaScript
2. Vertical menu development
- Use a big box to wrap 6 small boxes, set the height of the big box to 100%, set the height of the small box to 16.66%, divide them evenly and fine-tune them
- There is a dividing line between each small box, which will occupy a certain height of the box. Remember to add box-sizing: border-box; attribute
index.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>
index.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. Fresh flick part
- When the mouse hovers over the picture, the picture will be enlarged, and the entire card will have a shadow effect. Note that the big box should be hidden
/* 鼠标触碰图片有放大效果*/
.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);
}
- The 8 boxes are left floating, pay attention to remove the margin value of the fourth box and the eighth box, you can use: nth-child (4n) child selector
.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. The free travel part of machine wine
- The right navigation bar adopts right floating, when the mouse hovers, the font becomes the project standard green, and the lower border is displayed
- Note that the a tag should be styled separately and turned into a block element, otherwise the corresponding effect cannot be displayed
.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;
}
- View the small arrows of more parts, when the mouse hovers over this box, it can jump up and down
.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. Local Fun Section
- The main content part is divided into three big boxes, which are floated to the left, and the third box also needs to remove the margin value (margin-right: 0;)
- 199 can be wrapped with a strong tag
- The red view more part is very similar to the previous module. You can create a public class and set unique attributes such as color and width.
6. Public class use
Put the attributes shared by all elements into a public class, just add this public class directly, content-part and common-style are both public classes.
<section class="jjzyx content-part common-style"><section>
7. Application of transition and deformation in actual combat
Transitions and transforms are powerful features of CSS that add animation and interactivity to web pages. Here are some common uses of transitions and morphs in practice:
-
Mouseover Effects: Use the transition property to make elements such as images, buttons, or links transition smoothly when the mouse is hovering over them. For example, changing the background color from transparent to opaque, or zooming in on an image, etc.
-
Page Loading Animations: By applying transitions and transformations while the page loads, you can provide users with a better visual experience. You can use transition properties to control an element's transparency, position, and size, or use transform properties to achieve effects such as rotation, scaling, and movement.
-
Collapse and expand content: Use transition effects to smoothly collapse or expand content areas when the user clicks a button or link. This effect can be achieved by combining the height and transparency of the deformation properties.
-
Carousel Effects: Use transition and transform properties to create a variety of carousel effects, such as fade, slide, or flip effects.
-
Progress bars and loading animations: By setting transition effects and transform properties, you can create progress bars and loading animations to let users know that a task is in progress or that a page is loading.
-
User Interaction Hints: Transitions and transformations can be used to provide visual feedback as users interact with web pages. For example, use transition effects to change the button color or size when the button is tapped in response to the user's actions.
footer development
- The content of the first line is center-aligned on both sides, so the padding or margin values on the left and right sides should be removed, and the last right border should also be removed.
- The content of the second line can use the dl tag
<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>
Summarize
The Muyunyou project is a static web development project based on HTML5 and CSS3. In the project, some new features and features of HTML5 and CSS3 are used to create a web page with a modern look and interactivity.
-
Use semantic HTML structure: In the project, we follow HTML5 semantic tags, such as
<header>,<nav>,<main>,<section>,<article>,<footer>etc. to better describe the structure and content of the page. -
CSS3 transition and animation effects: In order to enhance the dynamics and interactivity of the page, we use CSS3 transition and animation effects. By setting transition effects and keyframe animations of CSS properties, we achieve smooth transitions and various animation effects, such as fade in and fade out, rotation, scaling and translation, etc.
-
Gradient and shadow effects: Through the linear gradient and radial gradient features of CSS3, we have added gradient effects to the background, buttons and other elements to enhance the visual appeal of the page. At the same time, the shadow property of CSS3 is also used to create a shadow effect, which increases the sense of layering and three-dimensionality of the element.
-
Font icon and sprite technology: In order to improve the loading performance and user experience of web pages, we use font icons to replace some pictures, which reduces network requests and speeds up page loading.
-
Using CSS3 pseudo-class selectors and transition effects provides better interaction effects and user feedback for form elements.
Source link: https://pan.baidu.com/s/1ftwBYKbTdA6o0bYxG70d0w?pwd=zujj
Extraction code: zujj