Nhập nội dung tìm kiếm

06/03/2024

Thiết kế giao diện Website với CSS trong Dreamweaver

Code
HTML: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Trang chủ</title>

        <link href="myCSS.css" rel="stylesheet" type="text/css" /></head>

<body>

<div class="header">ĐIỆN MÁY AN KHANG</div>

<div class="menu"> Trang chủ | Giới thiệu | Liên hệ</div>

    <div class="menuLeft">

    <h4 align="center">Sản phẩm</h4>

        <ul>

            <li>Ti vi</li>

            <li>Tủ lạnh</li>

            <li>Máy quạt</li>

        </ul>

    </div>

<div class="contents">

    <p>Contents</p>

    <p>Contents</p>

    <p>Contents</p>

    <p>Contents</p>

</div>

<div class="footer">Footer</div>

</body>

</html>


CSS:

@charset "utf-8";

.header {

font-size: 36px;

font-weight: bold;

color: #F00;

background-color: #6C9;

text-align: center;

margin: 5px;

padding: 5px;

float: left;

height: 150px;

width: 100%;

border: thin solid #060;

}

.menu{

font-size: 18px;

color: #FFF;

background-color: #900;

margin: 5px;

padding: 5px;

float: left;

height: 30px;

width: 100%;

border: thin solid #900;

}

.menuLeft{

background-color: #6C9;

text-align: left;

margin: 5px;

padding: 5px;

float: left;

width: 15%;

height: 500px;

border: thin solid #030;

}

.contents{

margin: 5px;

padding: 5px;

float: left;

height: 500px;

width: 77%;

border: thin solid #060;

}

.footer{

background-color: #6C6;

margin: 5px;

padding: 5px;

float: left;

height: 150px;

width: 100%;

border: thin solid #060;

}


Liên hệ

Tên

Email *

Thông báo *