HTML VA CSS dan foydalanib freameset tegi yordamida elektron darslik yaratish bet 6/6 Sana 22.12.2023 Hajmi 6,9 Mb. #127075
Bog'liq
musayev izzatillo web dasturlash deadline HTML VA CSS dan foydalanib freameset tegi yordamida elektron darslik yaratish.
Birinchi html fayl ochib unga quyidagicha kod yozib freameset tegi yordamida elektron darslikni ko’rinishini yaratib olamiz.
Shu bilan birgalikda style tegidan foydalanib dizayn ham berib o’tamiz
Dastur kodi:
Elektron Darslik body { margin: 0; padding: 0; }
frameset { width: 100%; height: 100vh; border: none; }
frame { border: none; } .frm2{ display: flex; flex-direction: row; }
Dastur natijasi:
Shundan so’ng bu freameset tegimizni src ga header , menyu va content fayilarimizni bog’lab ularga ishlov beramiz
Header qismiga quyidagicha kod yozib ishlov beramiz
Dastur kodi:
Elektron darslik header{ padding: 25px 75px; background-image: url(image.jpg); background-size: cover; background-repeat: no-repeat ; background-position: center; } header h1{ text-align: center; color: rgb(9, 105, 9); }
1-dars
2-dars
3-dars
4-dars
5-dars
*{ padding: 0; margin: 0; } body{ background-image: url(rasm.jpg); background-size: cover; background-repeat: no-repeat; height: 100%; } .menyu1{ text-decoration: none; color: rgb(255, 255, 0); } .btn{
display: flex; flex-direction: column; padding-top: 10px; margin-top: 10px; border-radius: 10px 20px;
} .btn0{ padding-bottom: 20px; height: 40px; font-size: 20px; font-style: bold; background-color: rgba(0, 0, 0); box-shadow: 3px 3px 4px rgb(0, 255, 242); border-radius: 4px; } .btn0:hover{ font-style: bold; background-image: url(rasmlar.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.7); border-radius: 10px; transition: 0.8s; letter-spacing: 8px; overflow: hidden; text-decoration: none; text-transform: uppercase; text-shadow: 3px 3px 5px rgb(0, 0, 0); } .btn1{ padding-bottom: 20px; height: 40px; font-size: 20px; font-style: bold; background-color: rgba(0, 0, 0); box-shadow: 3px 3px 4px rgb(0, 255, 242); border-radius: 4px; } .btn1:hover{ font-style: bold; background-image: url(rasmlar.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; box-shadow: 3px 3px 4px rgba(234, 255, 0, 0.7); border-radius: 10px; transition: 0.8s; letter-spacing: 8px; overflow: hidden; text-decoration: none; text-transform: uppercase; text-shadow: 3px 3px 5px rgb(0, 0, 0); } .btn2{ padding-bottom: 20px; height: 40px; font-size: 20px; font-style: bold; background-color: rgba(0, 0, 0); box-shadow: 3px 3px 4px rgb(0, 255, 242); border-radius: 4px; } .btn2:hover{ font-style: bold; background-image: url(rasmlar.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; box-shadow: 3px 3px 4px rgba(234, 255, 0, 0.7); border-radius: 10px; transition: 0.8s; letter-spacing: 8px; overflow: hidden; text-decoration: none; text-transform: uppercase; text-shadow: 3px 3px 5px rgb(0, 0, 0); } .btn3{ padding-bottom: 20px; height: 40px; font-size: 20px; font-style: bold; background-color: rgba(0, 0, 0); box-shadow: 3px 3px 4px rgb(0, 255, 242); border-radius: 4px; } .btn3:hover{ font-style: bold; background-image: url(rasmlar.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; box-shadow: 3px 3px 4px rgba(234, 255, 0, 0.7); border-radius: 10px; transition: 0.8s; letter-spacing: 8px; overflow: hidden; text-decoration: none; text-transform: uppercase; text-shadow: 3px 3px 5px rgb(0, 0, 0); } .btn4{ padding-bottom: 20px; height: 40px; font-size: 20px; font-style: bold; background-color: rgba(0, 0, 0); box-shadow: 3px 3px 4px rgb(0, 255, 242); border-radius: 4px; } .btn4:hover{ font-style: bold; background-image: url(rasmlar.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; box-shadow: 3px 3px 4px rgba(234, 255, 0, 0.7); border-radius: 10px; transition: 0.8s; letter-spacing: 8px; overflow: hidden; text-decoration: none; text-transform: uppercase; text-shadow: 3px 3px 5px rgb(0, 0, 0); }