シンプルな HTML 動画の Web デザインを作成する (HTML+CSS)

プログラミング 2023-04-09 21:52:26 訪問数: null

HTML の例の Web ページ コード。この例は、HTML の初心者である学生に適しています。この例では、css スタイルの設定と div スタイルのパターンがあります. この例は、より包括的で、学生が学習するのに役立ちます. この記事では、個人の Web サイトをゼロからデザインしてコードに変換することで、デザインを練習する方法を紹介します.

記事ディレクトリ

1.Webページ紹介

1 Webページ紹介：この作品は、学生の個人ホームページのWebデザイン、HTML+CSSのレイアウト制作、Webフロントエンドの最終課題、大学生のWebデザインの宿題のソースコードをテーマにしたもので、これは良いWebページの制作です、写真はスマートです、コードはシンプルな学生レベルで、初心者が使い方を学ぶのに非常に適しています。

2. Web ページの編集: Web ページのコードはシンプルで、任意の HTML 編集ソフトウェアを使用できます ( Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++、およびその他の任意の HTML 編集ソフトウェアを実行、変更、および編集など）。

3. 知識の適用: 技術的には、主に Web ページの知識を適用します: Div+CSS、マウスオーバー効果、表、ナビゲーション バー効果、バナー、フォーム、二次および三次ページなど、ビデオ、オーディオ要素、Flash、同時にデザイン ロゴに必要な知識ポイント（ソースファイル）。

1.Webページ効果

ここに画像の説明を挿入
ここに画像の説明を挿入
ここに画像の説明を挿入
ここに画像の説明を挿入
ここに画像の説明を挿入

2.コード表示

1.HTMLコード

コードは次のとおりです (例): 以下は参考のためにコードの一部のみを示します ~

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>电影网站</title>
		<link rel="stylesheet" href="css/main.css" />
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/icofont.css" />
		<link rel="stylesheet" href="css/mian_style.css" />
		<script src='./js/jquery.js'></script>
	</head>
	<body>
		<!--头部开始	-->
		<header class="header">
			<div class="container">
				<div class="header_area">
					<div class="logo">
						<a href="index.html">
							<img src="picture/logo.png" alt="logo"/>
						</a>
					</div>	
					<div class="meau">
						<ul>
							<li>
								<a class="active" href="index.html">首页</a>
							</li>
							<li>
								<a href="movies.html">电影</a>
							</li>
							<li>
								<a href="celebrities.html">明星</a>
							</li>
							<li>
								<a href="hot.html">热点</a>
							</li>
							<li>
								<a href="news.html">新闻</a>
							</li>
							<li style="width: 120px;">
								<a href="###" class="theme-btn">
									<i class="icofont icofont-ticket"></i>
									&nbsp;&nbsp;订票									
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!--头部结束-->			
		</header>
		<!--内容部分开始-->
			<section id="content">
				<!--banner开始-->
				<div class="banner">
					<ul class="list">
						<li class="on"><a href="#"><img src="picture/b1.jpg" alt="" /></a></li>
						<li><a href="#"><img src="picture/b2.jpg" alt="" /></a></li>
						<li><a href="#"><img src="picture/b3.jpg" alt="" /></a></li>
						<li><a href="#"><img src="picture/b4.jpg" alt="" /></a></li>
						<li><a href="#"><img src="picture/b5.jpg" alt="" /></a></li>
					</ul>
					<ul class="btn">
						<li class="on">1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
						<li>5</li>
					</ul>
					
					<a href="javascript:;" class="arrow left">&lt</a>
					<a href="javascript:;" class="arrow right">&gt</a>
				</div>
				<!--近期热播-->
				<div class="con_area">
					<div class="container">
						<div class="recent_con">
							<div class="con_top">
								<h1>
									<i class="icofont icofont-movie" ></i>
									近期热播
								</h1>
								<a href="index.html" class="more">
									MORE>>
								</a>
							</div>
							<div class="con_main">
								<ul style="overflow:hidden;margin-bottom: 20px;">
									<li class="img_right">
										<img src="picture/portfolio1.png" alt="1" />
										<a>
											<i class="icofont icofont-ui-play"></i>
										</a>
										<div class="portfolio-content">
										<h2>Boyz II Men</h2>
										<div class="review">
											<div class="author-review">
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
				
											</div>
											<h4>180k voters</h4>
										</div>
									</div>
									</li>
									
									<li  class="img_right">
										<img src="picture/portfolio2.png" alt="1" />
										<a>
											<i class="icofont icofont-ui-play"></i>
										</a>
										<h2>Boyz II Men</h2>
										<div class="review">
											<div class="author-review">
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
				
											</div>
											<h4>180k voters</h4>
										</div>
									</li>
									<li  class="img_right">
										<img src="picture/portfolio2.png" alt="1" />
										<a>
											<i class="icofont icofont-ui-play"></i>
										</a>
										<h2>Boyz II Men</h2>
										<div class="review">
											<div class="author-review">
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
				
											</div>
											<h4>180k voters</h4>
										</div>
									</li>
									<li>
										<img src="picture/portfolio4.png" alt="1" />
										<a>
											<i class="icofont icofont-ui-play"></i>
										</a>
										<h2>Boyz II Men</h2>
										<div class="review">
											<div class="author-review">
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
				
											</div>
											<h4>180k voters</h4>
										</div>
									</li>																		
								</ul>
								<ul>
									<li class="img_right">
										<img src="picture/portfolio5.png" alt="1" />
										<a>
											<i class="icofont icofont-ui-play"></i>
										</a>
										<h2>Boyz II Men</h2>
										<div class="review">
											<div class="author-review">
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
				
											</div>
											<h4>180k voters</h4>
										</div>
									</li>
									<li  class="img_right">
										<img src="picture/portfolio6.png" alt="1" />
										<a>
											<i class="icofont icofont-ui-play"></i>
										</a>
										<h2>Boyz II Men</h2>
										<div class="review">
											<div class="author-review">
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
				
											</div>
											<h4>180k voters</h4>
										</div>
									</li>
									<li  class="img_right">
										<img src="picture/portfolio2.png" alt="1" />
										<a>
											<i class="icofont icofont-ui-play"></i>
										</a>
										<h2>Boyz II Men</h2>
										<div class="review">
											<div class="author-review">
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
				
											</div>
											<h4>180k voters</h4>
										</div>
									</li>
									<li>
										<img src="picture/portfolio4.png" alt="1" />
										<a>
											<i class="icofont icofont-ui-play"></i>
										</a>
										<h2>Boyz II Men</h2>
										<div class="review">
											<div class="author-review">
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
												<b class="icofont icofont-star"></b>
				
											</div>
											<h4>180k voters</h4>
										</div>
									</li>																		
								</ul>
							</div>
						</div>
					</div>
				</div>
				<!--经典电影-->
				<div class="con_area">
					<div class="container">
						<div class="jd_con">
							<div class="con_top">
								<h1>
									<i class="icofont icofont-film" ></i>
									经典电影
								</h1>
								<a href="index.html" class="more">
									MORE>>
								</a>
							</div>
				<div class="row" style="overflow: hidden; width: 100%;">
                    <div class="col-md-9">
						<div class="video-area">
							<img src="picture/video1.png" alt="video" />
							<a href="###" class="popup-youtube">
								<i class="icofont icofont-ui-play"></i>
							</a>
							<div class="video-text">
								<h2>Angle of Death</h2>
								<div class="review">
									<div class="author-review">
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
									</div>
									<h4>180k voters</h4>
								</div>
							</div>
						</div>
						<div class="video-area">
							<img src="picture/video1.png" alt="video" />
							<a href="###" class="popup-youtube">
								<i class="icofont icofont-ui-play"></i>
							</a>
							<div class="video-text">
								<h2>Angle of Death</h2>
								<div class="review">
									<div class="author-review">
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
									</div>
									<h4>180k voters</h4>
								</div>
							</div>
						</div>
						<div class="video-area">
							<img src="picture/video1.png" alt="video" />
							<a href="###" class="popup-youtube">
								<i class="icofont icofont-ui-play"></i>
							</a>
							<div class="video-text">
								<h2>Angle of Death</h2>
								<div class="review">
									<div class="author-review">
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
									</div>
									<h4>180k voters</h4>
								</div>
							</div>
						</div>
						<div class="video-area">
							<img src="picture/video1.png" alt="video" />
							<a href="###" class="popup-youtube">
								<i class="icofont icofont-ui-play"></i>
							</a>
							<div class="video-text">
								<h2>Angle of Death</h2>
								<div class="review">
									<div class="author-review">
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
										<i class="icofont icofont-star"></i>
									</div>
									<h4>180k voters</h4>
								</div>
							</div>
						</div>
                    </div>
				</div>
						</div>
					</div>
				</div>
			<!--	最新电影-->
				<div class="con_area">
					<div class="container">
						<div class="jd_con">
							<div class="con_top">
								<h1>
									<i class="icofont icofont-coffee-cup" ></i>
									最新电影
								</h1>
								<a href="index.html" class="more">
									MORE>>
								</a>
							</div>
			</div>
			<div class="news-slide-area">
				<div class="news-slider">
					<div class="single-news">
						<div class="news-bg-1"></div>
						<div class="news-date">
							<h2><span>NOV</span> 25</h2>
							<h1>2017</h1>
						</div>
						<div class="news-content">
							<h2>The Witch Queen</h2>
							<p>Witch Queen is a tall woman with a slim build. She has pink hair, which is pulled up under her hat, and teal eyes.</p>
						</div>
						<a href="#">Read More</a>
					</div>
					<div class="single-news">
						<div class="news-bg-2"></div>
						<div class="news-date">
							<h2><span>NOV</span> 25</h2>
							<h1>2017</h1>
						</div>
						<div class="news-content">
							<h2>The Witch Queen</h2>
							<p>Witch Queen is a tall woman with a slim build. She has pink hair, which is pulled up under her hat, and teal eyes.</p>
						</div>
						<a href="#">Read More</a>
					</div>
					<div class="single-news">
						<div class="news-bg-3"></div>
						<div class="news-date">
							<h2><span>NOV</span> 25</h2>
							<h1>2017</h1>
						</div>
						<div class="news-content">
							<h2>The Witch Queen</h2>
							<p>Witch Queen is a tall woman with a slim build. She has pink hair, which is pulled up under her hat, and teal eyes.</p>
						</div>
						<a href="#">Read More</a>
					</div>
				</div>
			</div>
					</div>
				</div>
			
			</section>
			<!--end start-->
		<footer id="end">
			<div class="container">
				<span class="company">
					北京时代国际影业有限公司
				</span>
			</div>
		</footer>
	</body>
	<script type="text/javascript" src="js/main.js"></script>
</html>

2.CSSコード


body{
    
    
	line-height: 24px;
	font-size: 14px;
	color: #b6b7b9;
	background: #13151f;
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	position: relative;
/*	height: 5000px;*/
}
.header{
    
    
	padding: 18px 0;
	width: 100%;
	border-bottom: 1px solid #252838;
	z-index: 99;
}
.header_area{
    
    
	overflow: hidden;
}
.container{
    
    
	max-width: 1140px;
	margin: 0 auto;
}
.logo{
    
    
	float: left;
}
.logo a{
    
    
	display: inline-block;
}
.meau{
    
    
	float: right;
	padding-top: 34px;
}
.meau li{
    
    
	float: left;
	width: 90px;
	text-align: center;
}
.meau li a{
    
    
	font-family: "微软雅黑";
	font-size: 14px;
	color: #ffffff;
	text-decoration: none;
}
.meau li a:hover{
    
    
	color: #eb315a;
}
.meau li .active{
    
    
	color: #eb315a;
}
.meau li .theme-btn{
    
    
	background: #eb315a;
	border: 1px solid #eb315a;
	color: #fff;
	border-radius: 35px;
	padding: 5px 25px;
	display: inline-block;
	font-size: 15px;
	cursor: pointer;
	font-weight: 500;
}
.meau li .theme-btn:hover{
    
    
	color: #eb315a;
	border: 1px solid #eb315a;
	background: rgba(235,49,90,0.2);
}
/*banner*/
.banner{
    
    
			width: 100%;
			height: 450px;
			margin: 0px auto;
			overflow: hidden;
			position: relative;
}
		
		.list li{
    
    
			position: absolute;
			width: 100%;
			text-align: center;
		}
		
		.btn{
    
    
			font:14px/2.5em "微软雅黑";
			text-align: center;
			position: absolute;
			left: 50%;
			transform: translateX(-55%);	
			bottom:40px;	
			z-index: 2;	
		}
		.btn li{
    
    
			float: left;
			width: 30px;
			line-height: 30px;
			border-radius: 50%;
			background: salmon;
			margin: 0 5px;
			color: #fff;
			cursor: pointer;
		}
		.btn .on{
    
    
			background: slateblue;
		}
		.list .on{
    
    
			z-index: 1;
		}
		
		.arrow{
    
    
			position: absolute;
			top: 50%;
			transform: translateY(-40%);
			width: 30px;
			text-align: center;
			line-height: 60px;
			background: rgba(0,0,0,0.3);
			color: #fff;
			text-decoration: none;
			font-size: 20px;
			z-index: 2;
		}
		.right{
    
    
			right: 14%;
		}
		.left{
    
    
			left:14%;
		}
		.arrow:hover{
    
    
			background: rgba(0,0,0,0.5);
			font-weight: bold;
			text-decoration: none;
		}
/*近期热播*/
.con_area{
    
    
	padding-top: 30px;
}
.recent_con{
    
    
	overflow: hidden;
}
.con_top{
    
    
	height: 54px;
	padding:8px 0;
	border-bottom: 1px solid #ffffff;
}
.con_top h1{
    
    
	float: left;
}
.con_top h1 i{
    
    
	color: #fece50;
	font-size: 40px;
	margin-right: 5px;
}
h1{
    
    
	font-size: 36px;
	color: #ffffff;
}
.more{
    
    
	float: right;
	line-height: 74px;
	color: #eb315a;
}
.con_main{
    
    
	margin-top: 50px;
}
.con_main li{
    
    
	float: left;
	display: block;
	position: relative;
	cursor: pointer;
	width: 255px;
}
.con_main li:hover img{
    
    
	width: 102%;
	height: 102%;
}
.con_main li img{
    
    
	transition: 0.9s
}
.con_main .img_right{
    
    
	margin-right: 2.2%;
}
.con_main li a{
    
    
	display: block;
	position: absolute;	
	top: 42%;
	margin-top: -30px;
	margin: auto;
	left: 50%;
	margin-left: -30px;
}
.con_main li i{
    
    
	width: 60px;

	height: 60px;
	
	line-height: 60px;
	
	color: #fff;
	
	border: 2px solid #fff;
	
	border-radius: 50%;
	
	text-align: center;
	
	font-size: 18px;
	
	display: inline-block;	
	transition: all 0.4s;	
	
}
.con_main li i:hover{
    
    
	color: orange;
	border-color: orange;
}
/*底部*/
#end{
    
    
	margin-top: 30px;
	background:#202334;
}
.company{
    
    
	width: 100%;
	display: inline-block;
	padding: 20px 0px;
	text-align: center;
}
/*详情页标题*/
.breadcrumb-area-content h2{
    
    
	margin-top: 30px;
}

3.個人的なまとめ

適格な Web ページのセットには、次のものが含まれている必要があります (具体的には、個々の要件に従って決定できます)。

  1. ページは、ヘッダー、メニュー ナビゲーション バー (できればプルダウン)、中間コンテンツ セクション、およびフッターの 4 つの部分に分かれています。
  2. すべてのページは相互にハイパーリンクされており、5 ～ 10 ページで構成される第 3 レベルのページに移動できます。
  3. ページ スタイルの統一されたレイアウトは、Div+Css テクノロジを使用して、乱雑ではなく正常です。
  4. メニューは美しく人目を引くもので、セカンダリ メニューは通常どおりポップアップしてジャンプできます。
  5. タイミングの切り替えや画像ニュースの手動切り替えなど、JS の特殊効果が必要です。
  6. このページには、gif、ビデオ、音楽、フォーム技術の使用などのマルチメディア要素があります。
  7. ページはきれいで、美しく、寛大で、同じではありません.
  8. Web サイトのフロントエンド プログラムは、ユーザーが必要とするコンテンツを表示できるだけでなく、優れたレイアウト、美しいインターフェイス、エレガントなカラー マッチング、およびさまざまな表現形式の要件も満たす必要があります。

4.経験

多くの開発者は、長期的な設計は生得的な能力であり、創造性は生得的であると信じています。しかし、デザインは他のものと同じように学べるスキルです。美しいウェブサイトを作成するのに生まれつきのアーティストである必要はありません. 練習が必要です. 制限をあまり知りません. 必要なコンテンツのアイデアに従う必要があります. 振り返れば見るほど.あなたのサイトは、満足度が低く、達成感がありません。

①人混みから目立ちます。多くの開発者は他のサイトからページを移植することを好みますが、それが彼らによって設計されたものではないことは容易にわかります。あなたの個人的なウェブサイトの目的があなたの能力を示すことである場合、テンプレートを使用すると、他の人のあなたへの肯定が低下し、独自のデザインの独自のスタイルが多くのサイトの中であなたのサイトを際立たせます.

②練習技。それを設計することは、設計原則、ツール、HTML および CSS を実践するのに役立ちます。ユーザー インターフェイスを開発して Web に導入することがより簡単になります。ユニークでモダンな個人用サイトをデザインします。

以前プライベートで仕事をしていた時は、ページのデザインの仕方がわからなかったり、他のサイトのページを移動するとき、写真や一部のページを修正するときのツールの使い方がわからず、デザインされたページは硬直的で柔軟ではありませんでした。 、お客様は満足していませんでした。

③ アプリケーションのパフォーマンスが向上します。カスタム CSS を使用すると、Web サイトが軽量になり、パフォーマンスが向上します。U ライブラリまたはテンプレートを含める場合、使用していない可能性のあるすべてのカスタマイズをカバーするために、多くのコードが含まれている可能性があります。未使用のコードがユーザーに送信されると、サイトのパフォーマンスに悪影響を及ぼす可能性があります。Web ページの読み込みが遅く、開くのが遅いことは、多くの人に受け入れられません。

④職業能力の開発。Web 開発の役割では、完全な Web サイト デザインを最初から実装する必要はないかもしれませんが、最新のデザインと一致する見栄えの良いインターフェイスを作成できる必要があります。「フルスタック開発者」になるということは、通常、バックエンド言語またはフロントエンド JavaScript フレームワークに習熟していると同時に、デザインと製品の知識に精通していることを意味します。フルスタックの開発者は、ある程度の基本的な設計知識を持ち、ユーザーに一貫したエクスペリエンスを提供できる必要があります。もちろん、そこから多くの技術的知識を学んだことは間違いありません。

⑤面白いかもしれません。自分が誇れるものを作るのは楽しい経験です。人生の美しさを見つけることは美しいことですが、美しさを創造することはより誇りに思うと思います。

五、素晴らしい推薦

これを見たら【点赞，好评，收藏】3、応援が私の創作の原動力です。

おすすめ

転載: blog.csdn.net/qq_38512499/article/details/128658329
おすすめ
ランキング
uni.request在接口状态码403等还是走success
Springboot は mybatisplus を統合しており、ページング クエリによって返される Page オブジェクトの合計は常に 0 です。
System.InvalidOperationExceptionが：「BuildWindowCoreは、子ウィンドウのハンドル搭乗を返しません。」
[Example 08] IPD system advancement: version naming rules for version management
カスタム NavigationBar -- UIView による描画
データとデータの移行を復元します（個人的なメモ、無用リーダー）
4. 2次元配列で検索する
vim的私人订制
Flutterのカスタムルーティング切り替えアニメーション
Javaコンテナの方法の簡単なアプリケーションのArrayList
アーカイブ
もっと
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)

コードワールド

© 2018 codetd.com