Kinh Nghiệm Học Lập Trình Mạng

Category Archives: Kinh Nghiệm Học Lập Trình Mạng

HTML căn bản — Thẻ làm chữ chạy <marquee></marquee

Tháng Chín 21, 2010 – 8:01 sáng

Thẻ marquee

Trong trang Web, bạn có thể tạo hiệu ứng dòng chữ cuốn chạy như kiểu quảng cáo trên các bảng điện tử. Rất đơn giản, bạn chỉ cần dùng thẻ <MARQUEE>.

Ví dụ một đoạn text sau:

<MARQUEE> Để tạo hiệu ứng cuộn chữ bạn dùng thẻ <B>MARQUEE</B>. </MARQUEE>

Trong cặp thẻ MARQUEE bạn có thể dùng các loại thẻ HTML khác như bình thường chẳng hạn như Thay đổi màu chữ (thẻ FONT), in đậm, in nghiêng… nhưng nhớ là phải có thẻ đóng </MARQUEE>, nếu không cả đoạn văn bản của bạn sẽ chạy tuốt tuồn tuột.

Các thuộc tính của thẻ MARQUEE

Để chỉ định các phương pháp cuộc chữ, tốc độ cuộn chữ hay sắp xếp canh lề trái phải… bạn cần dùng thêm một số thuộc tính khác của thẻ MARQUEE.

Align: Sắp xếp canh chỉnh lề so với văn bản khác trong trang. Các giá trị của nó là Left, Right, Top, Middle, Bottom.

Behavior: Chỉ định phương pháp cuộn chữ. Các giá trị gồm: Scroll, Slide, Alternate.

<MARQUEE BEHAVIOR=scroll> Cuộn không ngừng </MARQUEE>
<MARQUEE BEHAVIOR=slide> Trượt theo 1 hướng dừng lại </MARQUEE>
<MARQUEE BEHAVIOR=alternate> Đổi hướng Trượt khi chạm vào biên </MARQUEE>

BGColor: Quy định màu nền của khung Marquee.

Direction: hướng cuộn văn bản. Các giá trị gồm: Left (từ phải sang trái), Right (từ trái sang phải).

Height: Chiều cao khung Marquee.

Width: Chiều rộng khung Marquee.

HSpace, VSpace: Khoảng cách ngang và dọc so với đoạn văn bản khác trong trang. Dùng khi sử dụng thuộc tính ALIGN.

Loop: Chỉ định số lần lặp lại của dòng Marquee. Theo mặc định là lặp vô tận, giá trị là Infinite hay -1

ScrollDelay: Chỉ định khoảng thời gian chờ sau mỗi lần cuộn. Số càng lớn, tốc độ càng chậm.

ScrollAmount: Chỉ định số Pixel giữa mỗi lần trợc. Số càng lớn thì cuộn càng nhanh và càng không nhuyễn.

<MARQUEE HEIGHT=50 BGcolor=#99CCFF BEHAVIOR=scroll SCROLLAMOUNT=”50″>
Cuộn nhanh
</MARQUEE>
<P ALIGN=Right><MARQUEE WIDTH=50% BGcolor=#FFCC99 BEHAVIOR=scroll SCROLLAMOUNT=”5″>
Cuộn chậm
</MARQUEE>
<P ALIGN=Center><MARQUEE DIRECTION=Right WIDTH=80% HEIGHT=60 BGcolor=#CCFF99 BEHAVIOR=scroll SCROLLAMOUNT=”20″>
<H3>Cuộn trung bình </H3>
<BR> Đây là dòng thứ hai
</MARQUEE>

Sưu tầm từ Sara Center <sara.com.vn>

Đưa chuột vào thì dừng chạy , đưa chuột ra thì chạy tiếp Grin

<marquee onmouseover=”this.stop();” onmouseout=”this.start();” behavior=”scroll” direction=”left” bgcolor=”silver” scrollamount=3>
Chữ chạy di chuột vào thì dừng , di ra thì chạy tiếp Grin
</marquee>

Viết 1 layout đơn giản bằng CSS

Tháng Bảy 30, 2010 – 3:06 chiều

Viết 1 layout đơn giản bằng CSS
dưới đây là 1 layout thông thường được viết bằng CSS các bạn có thể tham khảo cách viết này cho những ai mới bắt đầu.

code CSS

HTML Code:

<style type="text/css">
body {font-size:76%; font-family:"trebuchet MS", verdana, arial, sans-serif; background:#f0f0f0; word-wrap:break-word;}

#header {background:#a31e39;}

#outer1 {float:left; width:20%; background:#e0d0d0;}
#outer2 {float:left; width:60%; background:#c0c0c0;}
#outer3 {float:right; width:20%; background:#b0b0b0;}
#outer1, #outer2, #outer3 {padding-bottom:32767px; margin-bottom:-32767px;}

#wrapper {overflow:hidden; background:#c0c0c0;}


#footer {clear:both; background:#455c5a;}

h1 {font-size:20px; margin:0; padding:10px 0; color:#fff;}
h3 {font-size:18px; margin:0; padding:8px 0;}
.content {padding:10px;}
p {font-size:12px; line-height:1.5em; margin:0; padding:5px 0;}
#footer p,
#header p {color:#fff;}
#footer a {color:#fff;}
#footer a:hover {text-decoration:none;}
</style>

<!--[if lte IE 7]>
<style type="text/css">
body {word-wrap:break-word;}
#outer2 {float:left; width:59.8%; background:#c0c0c0;}

/* for IE6 */
* html #wrapper {display:inline-block;}
</style>
<![endif]-->

Phần html

HTML Code:

</head>
<body>
        <div id="header">
            <div class="content">
                <h1>CSS play - SIMPLE Flexible Layout - 3 columns all percentage widths</h1>
                <p>Resize you browser window and watch it stay in shape. NO graphics have been used in this demonstration (except for the 'Donate' button).</p>
            </div>
        </div> <!-- end header -->
        <div id="wrapper">
            <div id="outer1">
                <div class="content">
                    <h3>Left 20%</h3>
                    <p>Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Phasellus lectus. Mauris posuere sapien in enim. Vivamus ut velit. Etiam ullamcorper purus eget felis. Ut mollis pretium nisl. Nulla suscipit pellentesque lacus.</p>
                    <p>Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Phasellus lectus. Mauris posuere sapien in enim. Vivamus ut velit. Etiam ullamcorper purus eget felis. Ut mollis pretium nisl. Nulla suscipit pellentesque lacus.</p>
                    <p>Pellentesque id metus. Aenean suscipit sapien et nibh. Suspendisse quis felis a justo condimentum dignissim. Vivamus hendrerit luctus risus. Ut mollis pretium nisl.</p>
                </div> <!-- end content -->
            </div>


            <div id="outer2">
                <div class="content">
                    <h3>Center 60%</h3>
                    <p>This layout has been tested in IE6, IE7, Firefox, Opera, Safari(PC) and Chrome all latest versions.</p>
                    <p>All the colors are background color, so there is no need for background images to give the impression of full height columns.</p>
                </div> <!-- end content -->
            </div> <!-- end outer2 -->


            <div id="outer3">
                <div class="content">
                    <h3>Right 20%</h3>
                    <p>This layout has been tested in IE6, IE7, Firefox, Opera, Safari(PC) and Chrome all latest versions.</p>
                    <p>All the colors are background color, so there is no need for background images to give the impression of full height columns.</p>
                    <p>All three columns will end at the footer.</p>
                </div> <!-- end content -->
            </div> <!-- end outer2 -->


        </div><!-- end #wrapper -->

        <div id="footer">
            <div class="content">
                <p>Copyright &copy;2009 stu nicholls - cssplay.co.uk | <a href="http://www.cssplay.co.uk/comments/comments.php?comment_id=Flexible%203Cols"  accesskey="C" title="Comments for this Layout">comments on these layouts</a></p>
                <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
                    <div>
                        <input type="hidden" name="cmd" value="_s-xclick" />
                        <input type="hidden" name="hosted_button_id" value="2928152" />
                        <input type="image" src="http://www.cssplay.co.uk/graphic/paypal.png" name="submit" alt="" />
                        <img alt="" src="https://www.paypal.com/en_GB/i/scr/pixel.gif" width="1" height="1" />
                    </div>
                </form>
            </div>
        </div> <!-- end footer -->
</body>
</html>

Demo : http://www.cssplay.co.uk/layouts/flexible-3column.html

Nguồn Cssplay

Bởi kinhnghiemaz | Also posted in Kinh Nghiệm Học CSS | Comments (0)

CSS cho web ba cột với tiêu đề web – định vị chính xác

Tháng Bảy 30, 2010 – 2:49 chiều

Để tăng sự mềm dẻo cho trang web, hiện nay người ta đang cố gắng loại bỏ các table khi thiết kế layout, thay vào đó là sử dụng thẻ DIV và kết hợp với CSS. Bài viết này cung cấp một ví dụ đơn giản giúp chúng ta có thể nhanh chóng dựng một layout mà không tốn quá nhiều thời gian cho việc design.
Ví dụ này trình bày cách thiết kế 1 layout gồm 3 phần: header, body, footer. Trong đó phần body gồm left_body và main_body.

example.html

view plain copy to clipboard print ?

Trích:

<head>
<title>Example</title>
<link rel=”stylesheet” href=”example.css” mce_href=”example.css” type=”text/css” /> </SPAN>
</head>
<body>
<div id=”wrapper”> </SPAN>
<div id=”header”>header</div> </SPAN>

<div id=”footer”>footer</div> </SPAN>
</div>
</body>
</html>

example.css

view plain copy to clipboard print ?

Trích:

* {
margin:0;
}
body {
text-align:center;
} </SPAN>
#wrapper {
margin:auto;
width:800px;
} </SPAN>
#header {
height:100px;
background:#99CC66;
} </SPAN>
#footer {
height:100px;
background:#339933;
} </SPAN>
#body_left {
float:left; </SPAN>
width:100px;
height:600px;
background:#FF9900;
} </SPAN>
#body_main {
float:left; </SPAN>
width:700px;
height:600px;
background:#99CCFF;
}
.vide {
clear:both;
}

* { margin:0;}body { text-align:center;}#wrapper { margin:auto; width:800px;}#header { height:100px; background:#99CC66;}#footer { height:100px; background:#339933;}#body_left { float:left; width:100px; height:600px; background:#FF9900;}#body_main { float:left; width:700px; height:600px; background:#99CCFF;}.vide { clear:both;}

Như ta thấy ở trên, file html không có gì đặc biệt, nó chỉ bao gồm cấu trúc các thành phần mà ta cần bố trí, còn bố trí như thế nào thì phụ thuộc hoàn toàn vào file CSS.

Bây giờ, ta sẽ tìm hiểu từng bước cách tạo layout trên:
– Tạo div #wrapper dùng để bao hàm toàn bộ trang web. Ta cần căn giữa div này trong cửa sổ để giúp trang web của chúng ta thích ứng với nhiều loại màn hình và độ phân giải khác nhau. Để làm được điều này, ta dùng margin:auto cho Firefox (vô dụng với IE ) và text-align:center trong body cho IE (vô dụng vơi FF ). Cuối cùng, thuộc tính width quyết định độ rộng trang web.
– Tạo các div: #header, #footer, #body. Không có gì đặc biệt, chúng sẽ lấy hết độ rộng của #wrapper và bố trí liên tiếp nhau từ trên xuống dưới:

Trích:

</SPAN>

– Bây giờ trong div #body, ta sẽ chia làm 2 cột bằng cách tạo 2 div #body_left và #body_main với 2 thuộc tính float (trôi nổi) và width. 2 div này sẽ bố trí liên tiếp nhau từ trái sang phải, nếu #body có đủ độ rộng:

Trích:

– Vấn đề bắt đầu nảy sinh: #footer biến mất 1 cách đầy bí ẩn . Thực ra nó ko biến đi đâu cả, có điều ta ko nhìn thấy được vì nó đã bị #body_left và #body_main che mất. Lý do: #body tuy bao hàm #body_left và #body_main, nhưng chiều cao của nó lại không phụ thuộc vào chiều cao của #body_left hay #body_main (do thuộc tính “trôi nổi” của chúng). #footer nằm sát dưới #body, mà #body có height 0, cho nên #footer sẽ nằm sát dưới #header, và bị #body_left và #body_main che khuất.
Dĩ nhiên ta có thể đặt height cho #body bằng với height của #body_left và #body_main để đẩy #footer xuống đúng chỗ. Tuy nhiên #body_left và #body_main thường có height thay đổi (phụ thuộc vào nội dung của chúng), và height của chúng thường cũng không bằng nhau. Cho nên ta chọn giải pháp là đặt thêm 1 div đặc biệt với thuộc tính clear:both bên dưới. Với thuộc tính clear:both, div đặc biệt này sẽ luôn nằm sát dưới 2 div “trôi nổi” kia. #body lại luôn phải bao hàm div đặc biệt này, do đó, nó sẽ luôn có height bằng với height lớn nhất của #body_left và #body_main. Nhờ vậy, #footer luôn được định vị đúng chỗ:

Trích:

</SPAN>

OK! Vậy là ta đã dựng xong một layout mềm dẻo, với code html hết sức gọn gàng sáng sủa. Một điều cần lưu ý là khi bố trí các div tạo cột, cần tính với độ rộng bao ngoài của div đó (margin+border+padding+width). Ở ví dụ này, nếu #body_main có padding:5px thì #wrapper phải rộng ra thêm 10px nữa mới đủ chỗ, nếu không nó sẽ nhảy xuống dưới .
-ST-
Chưa có thời gian để viết, sẽ cố viết bài kỹ hơn trong thời gian tới
các bác ủng hộ mình nhé

Bởi kinhnghiemaz | Also posted in Kinh Nghiệm Học CSS | Comments (1)

Kinhnghiemaz's Blog

Category Archives: Kinh Nghiệm Học Lập Trình Mạng

HTML căn bản — Thẻ làm chữ chạy <marquee></marquee

Viết 1 layout đơn giản bằng CSS

CSS cho web ba cột với tiêu đề web – định vị chính xác

Trang

Chuyên mục

Thư viện

Tìm

Blogroll

RSS Feeds

Meta