Cấu hình border của image
1. Vấn đề
Hình ảnh là một trong những đối tượng quan trọng trong quá trình xử lý, lập trình website và đặc biệt là trong cấu trúc xử lý css. CSS là một trong những đối tượng dùng để xử lý hình ảnh một cách chuyên nghiệp và hiệu quả nhất. Hôm nay chúng ta cùng nhau tìm hiểu vài nét về chủ đề cách xử lý border trong đối tượng images
2. Tạo border cho hình ảnh toàn site
Để tạo được border trong hình ảnh toàn site thì bạn cần áp dụng cho đối tượng img trong css. Cấu trúc img dùng để xử lý đối tượng images và định dạng thông qua css. Công thức như sau img{code here….}Thuộc tính quan trọng dùng để định dạng cho border của hình ảnh là border: độ dày kiểu định màu sắc
File màu css tên là imagestopic.css
img
{
width: 300px;
border: 2pxsolid#666;
background: #fff;
padding: 2px;
}
<headrunat="server">
<title>Images topic</title>
<linkhref="http://redirect.viglink.com?key=11fe087258b6fc0532a5ccfc924805c0&u=%2Fcss%2Fimagestopic.css%22rel%3D%22stylesheet%22type%3D%22text%2Fcss"/>
</head>
<body>
<formid="form1"runat="server">
<div>
<imgsrc="/images/1.jpg"/>
<imgsrc="/images/2.jpg"/>
</div>
</form>
</body>
</html>
Thông qua đoạn mã trên ta sẽ được những kết quả là tất cả các ảnh trong site sẽ có độ rộng là 300px; border của ảnh có độ dày là 2px kiểu định dạng là nét liền và có chỉ số màu là #666. Kết quả ta nhận được từ đoạn mã trên là
3. Hover cho đối tượng images
Từ kết quả của đoạn mã trên bây giờ chúng ta sẽ nghiên cứu thêm về đối tượng này khi rê chuột vào đối tượng. Bạn thêm đối tượng link <a></a> trước đối tượng image như sau
<headrunat="server">
<title>Images topic</title>
<linkhref="http://redirect.viglink.com?key=11fe087258b6fc0532a5ccfc924805c0&u=%2Fcss%2Fimagestopic.css%22rel%3D%22stylesheet%22type%3D%22text%2Fcss"/>
</head>
<body>
<formid="form1"runat="server">
<div>
<a href="http://redirect.viglink.com?key=11fe087258b6fc0532a5ccfc924805c0&u=%23"><img src="/images/1.jpg"/></a>
<a href="http://redirect.viglink.com?key=11fe087258b6fc0532a5ccfc924805c0&u=%23"><img src ="images/2.jpg"/></a>
</div>
</form>
</body>
</html>
Và thêm vào đoạn mã lệnh của css trong cùng file như sau
a:hoverimg
{
border-style: dotted;
background: red;
}
Thuộc tính hover của đối tượng link <a></a> sẽ làm việc khi bạn rê chuột vào hình ảnh, cụ thể trong ví dụ này là border-style là kiểu nét đứt và background là red. Và kết quả sẽ được hiển thị như sau
GV Hồ Đức Duy
Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.Thông tin kích hoạt gửi đến mail của bạn.
Cấu hình border của image
Người đăng: VNTAOBAO.COM on Thứ Sáu, 15 tháng 3, 2013
{ 0 nhận xét... read them below or add one }
Đăng nhận xét