h3lp/learning
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add web design files

Browse Source
This commit is contained in:
h3lp
2025-11-20 21:37:53 +02:00
parent 258f24570a
commit 9192716bfb
510 changed files with 12551 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

213
web-design/Занятие_4/4.css Normal file
View File

@@ -0,0 +1,213 @@
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
.FL {
float: left;
}
.FR {
float: right;
}
a {
color: #5d0e0e;
}
.containter {
width: 760px;
height: 940px;
margin: 0 auto;
}
.top {
background-image: url(images/img1.jpg);
width: 760px;
height: 120px;
}
.content {
width: 760px;
height: 700px;
margin-top: 20px;
margin-bottom: 10px;
}
.zion {
color: white;
padding-top: 100px;
padding-left: 10px;
font-family: Arial;
font-weight: bold;
}
.menu {
height: 50px;
width: 760px;
background-color: #3A3A3A;
border-bottom: 4px solid #5d0e0e;
}
.menu_list {
list-style-type: none;
margin-top: 23px;
}
.menu_list li {
display: inline;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
.menu_list li a {
color: white;
text-decoration: none;
font-family: Arial;
font-size: 13px;
}
.blog {
background-color: #5d0e0e;
}
.left_block {
width: 350px;
}
.middle_block {
margin-left: 370px;
margin-right: 195px;
}
.right_block {
width: 180px;
}
.last_line {
width: 760px;
border-bottom: 3px solid #5d0e0e;
}
.copyright {
margin-top: 15px;
margin-left: 15px;
font-size: 11px;
color: grey;
font-family: Arial;
}
.square {
margin-top: 7px;
margin-right: 5px;
}
.title {
font-family: Arial;
}
.posted_block {
border: 1px solid black;
background-color: #5d0e0e;
height: 20px;
}
.posted_text {
color: white;
font-family: Arial;
font-size: 9px;
margin-top: 5px;
margin-left: 10px;
}
.post {
background-color: #f2f2f2;
height: auto;
border-bottom: 3px solid #5d0e0e;
margin-bottom: 5px;
}
.red_link {
color: #fc0036;
text-decoration: none;
}
.post_content {
margin-left: 17px;
margin-right: 17px;
padding-top: 25px;
margin-bottom: 30px;
color: #666666;
}
.filed {
color: #666666;
margin-left: 7px;
margin-bottom: 10px;
}
.ordered_list {
margin-left: 35px;
margin-top: 20px;
margin-bottom: 20px;
}
.blockquote {
margin-left: 40px;
}
.title_block {
border: 1px solid black;
background-color: #5d0e0e;
height: 30px;
}
.title_block_text {
color: white;
font-family: Arial;
margin-top: 6px;
margin-left: 10px;
}
.search_field {
width: 120px;
height: 20px;
background-color: #5d0e0e;
}
.search_button {
height: 22px;
width: 30px;
background-color: #5d0e0e;
color: white;
font-size: 10px;
}
.list {
padding-top: 15px;
margin-left: 15px;
margin-bottom: 10px;
list-style-type: none
}
.list li {
padding-bottom: 1px;
border-bottom: 1px dotted #5d0e0e;
margin-bottom: 5px;
}
.list li a {
text-decoration: none;
}
.days {
color: #999;
font-family: Arial;
font-size: 15px;
margin-left: 7px;
}

140
web-design/Занятие_4/4.html Normal file
View File

@@ -0,0 +1,140 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<link href="4.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="containter">
<div class="top">
<p class="zion">ZION NARROWS BY FREE CSS TEMPLATES</p>
</div>
<div class="menu">
<ul class="menu_list FR">
<li class="blog"><a href="3">MY BLOG</a></li>
<li><a href="3">MY PHOTOS</a></li>
<li><a href="3">MY FAVORITES</a></li>
<li><a href="3">ABOUT ME</a></li>
<li><a href="3">CONTACT ME</a></li>
</ul>
</div>
<div class="content">
<div class="left_block FL">
<img src="images/img9.gif" width="7" height="7" class="FL square">
<h3 class="title">WELCOME TO ZION NARROWS!</h3>
<div class="posted_block">
<p class="posted_text">POSTED ON JANUARY 1ST, 2007 BT AUTHOR</p>
</div>
<div class="post">
<p class="post_content"><strong>Zion Narrows</strong> is a free template from <a href="#">Free CSS Templates</a> released under a <a href="#">Creative Commons Attribution 2.5 License</a>. Tge header photo is from <a href="#">PDPhoto.org</a>. You're free to use it for both commercial or personal use. I only ask that you link back to <a href="#" class="red_link">my site</a> in some way. Enjoy :)</p>
<p class="filed">Filed under <a href="#">Uncategorized</a> | <a href="#">1 Comment »</a></p>
</div>
<img src="images/img9.gif" width="7" height="7" class="FL square">
<h3 class="title">SAMPLE TAGS</h3>
<div class="posted_block">
<p class="posted_text">POSTED ON JANUARY 1ST, 2007 BT AUTHOR</p>
</div>
<div class="post">
<div class="post_content">
An ordered list:
<ol class="ordered_list">
<li><a href="#">Nullam et orci in erat viverra ornare.</a></li>
<li><a href="#">Suspendisse quis gravida massa felis.</a></li>
<li><a href="#">Curabitur malesuada turpis ncec ante.</a></li>
</ol>
A blockquote:
<p class="blockquote"><sup>&bdquo;</sup>Et pulvinar pede ligula a sapien. Donec fermentum condimentum nisi. Proin iaculis mauris od lorem viverra molestie. Duis vel orci. Name consequat. Morbi nec lacus.<sup>&bdquo;</sup></p>
</div>
<p class="filed">Filed under <a href="#">Uncategorized</a> | <a href="#">1 Comment »</a></p>
</div>
</div>
<div class="right_block FR">
<div class="title_block">
<p class="title_block_text">ARCHIVES</p>
</div>
<div class="post">
<ul class="list">
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">February</a><span class="days">(7)</span></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">January 2007</a><span class="days">(31)</span></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">December 2006</a><span class="days">(31)</span></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">November 2006</a><span class="days">(30)</span></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">October 2006</a><span class="days">(31)</span></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">September 2006</a><span class="days">(30)</span></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">August 2006</a><span class="days">(31)</span></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">July 2006</a><span class="days">(31)</span></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">June 2006</a><span class="days">(30)</span></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">May 2006</a><span class="days">(31)</span></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">April 2006</a><span class="days">(30)</span></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">March 2006</a><span class="days">(31)</span></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">February 2006</a><span class="days">(28)</span></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">January 2006</a><span class="days">(31)</span></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">December 2005</a><span class="days">(31)</span></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">November 2005</a><span class="days">(30)</span></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">October 2005</a><span class="days">(31)</span></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">September 2005</a><span class="days">(30)</span></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">August 2005</a><span class="days">(31)</span></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">July 2005</a><span class="days">(31)</span></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">June 2005</a><span class="days">(30)</span></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">May 2005</a><span class="days">(31)</span></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">April 2005</a><span class="days">(30)</span></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">March 2005</a><span class="days">(31)</span></li>
</ul>
</div>
</div>
<div class="middle_block">
<div class="title_block">
<p class="title_block_text">SEARCH</p>
</div>
<div class="post">
<div class="post_content">
<input type="text" class="search_field">
<input type="button" value="GO" class="search_button">
</div>
</div>
<div class="title_block">
<p class="title_block_text">CATEGORIES</p>
</div>
<div class="post">
<ul class="list">
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">Quisque vestibulum</a></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">Sed a nisl a lacus</a></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">Quisque sagittis</a></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">Etiam volutpat</a></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">In aliquet hendrerit</a></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">Suspendisse iaculis</a></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">Nam vel risus at</a></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">Praesent sit amet</a></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">Quisque vestibulum</a></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">In aliquet hendererit</a></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">Suspendisse iaculis</a></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">Nam vel risus at</a></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">Praesent sit amet</a></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">Quisque vestibulum</a></li>
</ul>
</div>
<div class="title_block">
<p class="title_block_text">BLOGROLL</p>
</div>
<div class="post">
<ul class="list">
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">AnotherFriendlySite.net</a></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">CoolSite.com</a></li>
<li><img src="images/img8.gif" width="5" height="9"> <a href="#">MyBestFriend.com</a></li>
</ul>
</div>
</div>
</div>
<div class="bottom">
<div class="last_line"></div>
<p class="copyright">Copyright &copy; 2006 Zion Narrows. Designed by <a href="#">Free CSS Templates</a></p>
</div>
</div>
</body>
</html>

BIN
web-design/Занятие_4/4_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 300 KiB

BIN
web-design/Занятие_4/4_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 94 KiB

BIN
web-design/Занятие_4/images/img1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
web-design/Занятие_4/images/img14.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
web-design/Занятие_4/images/img2.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 267 B

BIN
web-design/Занятие_4/images/img3.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 157 B

BIN
web-design/Занятие_4/images/img4.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 157 B

BIN
web-design/Занятие_4/images/img5.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 B

BIN
web-design/Занятие_4/images/img6.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 149 B

BIN
web-design/Занятие_4/images/img7.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 149 B

BIN
web-design/Занятие_4/images/img8.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 B

BIN
web-design/Занятие_4/images/img9.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 B

BIN
web-design/Занятие_4/images/spacer.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 B

BIN
web-design/Занятие_4/Фиксированный_3х_колоночный_1.doc Normal file
View File

Binary file not shown.