【Web】CSS（No.34）Css页面布局经典案例（四）《米柚官网》

最新推荐文章于 2024-10-26 18:13:01 发布

Sherry Lupus

最新推荐文章于 2024-10-26 18:13:01 发布

阅读量1.3k

点赞数 10

分类专栏： Web-Css 文章标签： Web Css

本文链接：https://blog.youkuaiyun.com/qq_43251850/article/details/91493349

版权

需要素材点击图片联系我或私信、评论

效果图：

在这里插入图片描述

html源码：

<!DOCTYPE html>
<html lang="en">
  <head>
	<meta charset="UTF-8">
	<title>米柚</title>
	<link rel="stylesheet" href="css/index.css">
  </head>
  <body>
	<!-- 导航部分 -->
	<div class="nav">
	  <div class="nav-bar">
	    <img src="img/logo.png" alt="" class="logo">
	    <ul class="bar">
	      <li>首页</li>
	      <li>主题</li>
	      <li>下载</li>
	      <li>产品</li>
	      <li>论坛</li>
	    </ul>
	    <span class="method">
	      <a href="#">简</a><span>&nbsp;|&nbsp;</span>
	      <a href="#">繁</a><span>&nbsp;|&nbsp;</span>
	      <a href="#">English</a>
	    </span>
	  </div>
	</div>

	<!-- 正文部分 -->
	<div class="main">
	  <!-- V5 -->
	  <div class="V5">
	    <div class="banner">
	      <div class="button">
	        <a href="#">下载MIUI</a>
	        <a href="#">进入论坛</a>
	      </div>
	    </div>
	  </div> 

	  <!-- video -->
	  <div class="video">
	    <div class="vid">
	      <div class="video1">
	        <img src="img/video1.png" alt="">