Nhờ review code html và css trang tin tức

tranvanchau · August 21, 2015, 4:27am

Các anh cho em hỏi chút ạ. Nhờ các anh xem giúp em đoạn html dưới đây bố cục như vậy được chưa và css đã tối ưu mức tối đa chưa ạ ? Em nghĩ mãi cũng chỉ làm được như vậy

<html>

<head>
    <title>BAI KIEM TRA</title>
    <meta charset="utf-8" />
    <link href="css/style.css" type="text/css" rel="stylesheet" />
    <link href="css/reset.css" type="text/css" rel="stylesheet" />
</head>

<body>
    <div class="wrapper">
        <h2>TIN TỨC</h2>
        <ul>
            <li>
                <div class="list">
                    <div class="list-1">
                        <a class="link" href="#" title="">
                            <h3 align="justify">Trung Quốc điều thêm 17 tàu đến khu vực giàn khoan</h3>
                        </a>
                        <div class="news">
                            <img src="images/h1.jpg" alt="" />
                            <p align="justify">Để bảo vệ giàn khoan, Trung Quốc đã điều thêm 17 tàu các loại so với hôm trước, sẵn sàng đâm va vào tàu Việt Nam.</p>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="list">
                    <div class="list-1">
                        <a class="link" href="#" title="">
                            <h3 align="justify">Trọng tài - vết đen của kỳ World Cup sôi động </h3>
                        </a>
                        <div class="news">
                            <img src="images/h2.jpg" alt="" />
                            <p align="justify">World Cup 2014 chưa đi hết lượt đầu vòng bảng nhưng các trọng tài đẳng cấp FIFA đã có tới bốn trận bị chỉ trích dữ dội.</p>
                        </div>
                    </div>
                </div>
                <div class="clr"></div>
            </li>
            <li>
                <div class="list-2">
                    <div class="list-1">
                        <a class="link" href="#" title="">
                            <h3 align="justify">Những mỹ nhân Việt duyên dáng ở tuổi tứ tuần</h3>
                        </a>
                        <div class="news">
                            <img src="images/h4.jpg" alt="" />
                            <p align="justify">Để bảo vệ giàn khoan, Trung Quốc đã điều thêm 17 tàu các loại so với hôm trước, sẵn sàng đâm va vào tàu Việt Nam.</p>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="list-1">
                    <a class="link" href="#" title="">
                        <h3 align="justify">Chuyển nhượng 17/6: Arsenal mua Balotelli, tráo hàng Man Utd</h3>
                    </a>
                    <div class="news">
                        <img src="images/h5.jpg" alt="" />
                        <p align="justify">Đội bóng thành London đang đẩy mạnh việc tuyển lựa những vị trí còn yếu trong đội hình ở cả ba tuyến.</p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</body>

</html>

tranvanchau · August 21, 2015, 1:26am

Đây là css ạ:

.wrapper{
	border: 1px solid white;
	width: 760px;
	float: left;
	margin: 10px 0px 0px 10px;
}
.wrapper h2{
	color: #d8141d;
	font-family: verdana;
	font-size: 24px;
	font-weight: normal;
}
.list{
	border-bottom: 1px dotted #a09c9c;
	float: left;
	margin-right: 50px;
}
.list-1{
	border: 1px solid white;
	width: 324px;
	float: left;
	margin: 10px 0px 10px 0px;
}
.list-1 h3{
	color: #df0000;
	font-size: 17px;
	padding-bottom: 5px;
}
.list-2{
	float: left;
	margin: 0px 50px 10px 0px; 
}
.news{
	border: 1px solid white;
	width: 324px;
}
.list-1 img{
	border: 1px solid white;
	width: 123px;
	height: 75px;
	float: left;
	margin-right: 5px;
}
.news p{
	line-height: 20px;
}
.clr{
	clear: both;
}
.link{
	text-decoration: none;
}

masoivn · August 21, 2015, 2:19am

thắc mắc là sao em dùng

<div class="list-2">
<div class="list-1">

sao không dùng luôn

<div class="list">

còn chỗ này

<link href="css/style.css" type="text/css" rel="stylesheet" />
<link href="css/reset.css" type="text/css" rel="stylesheet" />

sao em lại để css reset ở phía dưới style.

tranvanchau · August 21, 2015, 2:26am

Đây là hình ảnh em đang thiết kế. Do nó có Border-bottom ở 2 Div đầu nên em cho 1 class để css nó ạ.

masoivn · August 21, 2015, 2:47am

Anh không đủ code nên chạy không giống như hình của em đưa lên.
Em code mà chạy lên thấy giao diện giống như yêu cầu thì đúng rồi.
Cách sắp xếp thẻ và class css như vậy là ổn.

vhnam · August 21, 2015, 12:54pm

Thêm tí line-height cho .list-1 h3… nó hơi bị sát quá…